[英]React conditional rendering of multiple child components
我正在尝试根据状态渲染多个子组件但是我只能返回一个子组件(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>
)
直接我们不能返回多个元素。
可能的解决方案:
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);
您还可以使用ReactJS中的<Fragment>
: https ://reactjs.org/docs/fragments.html
使用<div>
包装所有元素的问题在于,您要向DOM添加更多元素,有时这是不可能的(例如,当您在<table>
中呈现<td>
或<tr>
<table>
。所以,这里是<Fragment>
来帮助我们的地方。
只需将所有这些元素包装在<Fragment>
就足够了。 含义:
{ myState &&
<Fragment>
<NavigationItem handleClick={handleClick} title={'#Link-1'} />
<NavigationItem handleClick={handleClick} title={'#Link-2'} />
<NavigationItem handleClick={handleClick} title={'#Link-3'} />
</Fragment>
}
无论如何,另一种“条件渲染”方法在“代码可读性”意义上更好: 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
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/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.