对多个子组件进行条件渲染-Java 学习之路

我正在尝试根据状态渲染多个子组件但是我只能返回一个子组件（SyntaxError：相邻的JSX元素必须包装在一个封闭的标记中）

每个子组件都传递相同的道具，这些代码怎么能保持干燥？

作品

export default ({changeState, myState, handleClick}) => (
    <Navigation>
            <span>Navigation</span>
            <button onClick={() => changeState()}>Navigation</button>
            { myState ?
                <NavigationItem handleClick={handleClick} title={'#Link-1'} />
              : null
            }
    </Navigation>
)

别

export default ({changeState, myState, handleClick}) => (
    <Navigation>
            <h1>Navigation</h1>
            <button onClick={() => changeState()}>Navigation</button>
            { myState ?
                <NavigationItem handleClick={handleClick} title={'#Link-1'} />
                <NavigationItem handleClick={handleClick} title={'#Link-2'} />
                <NavigationItem handleClick={handleClick} title={'#Link-3'} />
              : null
            }
    </Navigation>
)

3 回答

直接我们不能返回多个元素 .

Possible Solutions:

1- 您需要将所有元素包装在 div 或任何其他包装元素中 .

2- 我们也可以返回多个元素的数组，因此将所有项放在数组中，然后返回数组 .

像这样：

{myState ?
    [
        <NavigationItem handleClick={handleClick} title={'#Link-1'} />,
        <NavigationItem handleClick={handleClick} title={'#Link-2'} />,
        <NavigationItem handleClick={handleClick} title={'#Link-3'} />
    ]
  : null
}

检查此示例：

let b = true ? [1,2,3,4]: null;

console.log('b = ', b);

这会抛出错误：

let b = true? 1 2 3 4: null;

console.log('b = ', b);

回复于 2024-05-07T03:25:24+08:00

13
你也可以使用ReactJS的 <Fragment> ：https://reactjs.org/docs/fragments.html

使用 <div> 包装所有元素的问题在于，您要向DOM添加更多元素，有时这是不可能的（例如，当您在 <table> 中渲染 <td> 或 <tr> 时 . 所以，这里是 <Fragment> 来到的地方帮我们 .

只需将所有这些元素包装在 <Fragment> 中即可 . 含义：
```
{ myState &&
  <Fragment>
    <NavigationItem handleClick={handleClick} title={'#Link-1'} />
    <NavigationItem handleClick={handleClick} title={'#Link-2'} />
    <NavigationItem handleClick={handleClick} title={'#Link-3'} />
  </Fragment>
}
```
无论如何，这种方法在"code readability"意义上更好：https://medium.com/@BrodaNoel/conditional-rendering-in-react-and-jsx-the-solution-7c80beba1e36

它基本上建议使用 <Conditional> 元素，如：
```
<Conditional if={myState}>
  <NavigationItem handleClick={handleClick} title={'#Link-1'} />,
  <NavigationItem handleClick={handleClick} title={'#Link-2'} />,
  <NavigationItem handleClick={handleClick} title={'#Link-3'} />
<Conditional>
```
^这对我的眼睛看起来更好：D
回复于 2024-05-07T03:25:24+08:00

export default ({changeState, myState, handleClick}) => (
    <Navigation>
            <h1>Navigation</h1>
            <button onClick={() => changeState()}>Navigation</button>
            { myState ?
                <div>
                  <NavigationItem handleClick={handleClick} title={'#Link-1'} />
                  <NavigationItem handleClick={handleClick} title={'#Link-2'} />
                  <NavigationItem handleClick={handleClick} title={'#Link-3'} />
                </div>
              : null
            }
    </Navigation>
)

你应该将JSX包装成 <div/>

回复于 2024-05-07T03:25:24+08:00

对多个子组件进行条件渲染

3 回答

相关问题