javascript - 在父组件中有条件地渲染子组件

我有一个具有DataTable子组件的父组件Column。如果prop设置为true，我想包括一个特定的Column子组件。我尝试了逻辑&&和三元运算符。问题是我无法将任何null或未定义的值传递给DataTable。当DataTable为false时，逻辑&&和三元运算符似乎为this.props.hasMiddleName的子级提供了错误，空值或未定义的值。如何修复此代码，以便在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内部调用函数wich将使其变为子级。

<DataTable dataUrl={this.props.url}>
    {this.renderChildren()}
</DataTable>