我有三个组成部分<Header /> <Body /> <Footer />。我想根据以下条件更改显示顺序。
<div> <Header /> <Body /> <Footer /> </div>
要么
<div> <Body /> <Header /> <Footer /> </div>
或根据某些新条件使用不同的顺序。
我们可以按照想要的顺序将组件放置在数组中，然后可以按如下所示进行渲染。
class Layout extends React.Component {
render() {
let componentsOrder = [];
componentsOrder = isEnabled('renderBottom') ? [<List />, <AddToDo />] : [<AddToDo />, <List />]
componentsOrder = isEnabled('filter') ? [...componentsOrder, <Filter />] : [...componentsOrder]
return (
<div>
{componentsOrder.map((v, i) => <div key={i}>{v}</div>)}
</div>
)
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句