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

时间:2017-08-31 20:07:18

标签: javascript reactjs

我正在尝试根据状态渲染多个子组件但是我只能返回一个子组件(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 个答案:

答案 0 :(得分:22)

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

可能的解决方案:

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

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

像这样:

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

检查此示例:

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

console.log('b = ', b);
&#13;
&#13;
&#13;

这会抛出错误:

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

console.log('b = ', b);
&#13;
&#13;
&#13;

答案 1 :(得分:9)

您也可以使用ReactJS中的<Fragment>https://reactjs.org/docs/fragments.html

使用<div>包装所有元素的问题在于,您要向DOM添加更多元素,有时这是不可能的(例如,当您渲染{{1}时}或<td>内的<tr>。所以,<table>来帮助我们。

只需将所有这些元素包装在<Fragment>中,它就足够了。 含义:

<Fragment>

无论如何,这另一个&#34;有条件渲染&#34;方法可读性更好&#34;代码可读性&#34;感觉:https://medium.com/@BrodaNoel/conditional-rendering-in-react-and-jsx-the-solution-7c80beba1e36

它基本上建议使用{ myState && <Fragment> <NavigationItem handleClick={handleClick} title={'#Link-1'} /> <NavigationItem handleClick={handleClick} title={'#Link-2'} /> <NavigationItem handleClick={handleClick} title={'#Link-3'} /> </Fragment> } 元素,如:

<Conditional>

^这对我的眼睛看起来更好:D

答案 2 :(得分:-1)

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