javascript - React 多个子组件的条件渲染

Question

我试图根据状态渲染多个子组件，但我只能返回一个子组件(语法错误:相邻的 JSX 元素必须包含在封闭标记中)

每个子组件传递相同的 props，这段代码如何保持 DRY？

作品

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>
)

Answer 1

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

可能的解决方案:

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);