[英]Conditionally Render Child Component within Parent Component
我有一个具有Column
子组件的父组件DataTable
。 如果 prop 设置为 true,我想包含一个特定的Column
子组件。 我试过逻辑 && 和三元运算符。 问题是我无法将任何 null 或 undefined 值传递给DataTable
。 当this.props.hasMiddleName
为 false 时,逻辑 && 和三元运算符似乎为DataTable
提供了一个 false、null 或 undefined 值作为子项。 如何修复此代码,以便在this.props.hasMiddleName
为 false 时不传递任何虚假值?
<DataTable dataUrl={this.props.url}>
<Column Header={"First Name"} />
{ this.props.hasMiddleName &&
<Column Header={"Middle Name"} />
}
<Column Header={"Last Name"} />
</DataTable>
您应该在另一个函数中创建一个子数组。
renderChildren = () => {
let children = [<Column Header={"First Name"} />]
if(this.props.hasMiddleName) {
children.push(<Column Header={"Middle Name"} />)
}
children.push(<Column Header={"Last Name"} />)
return children
}
在DataTable
您调用将呈现其子项的函数。
<DataTable dataUrl={this.props.url}>
{this.renderChildren()}
</DataTable>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.