Javascript 在父组件中有条件地呈现子组件

我有一个父组件

DataTable

，它有

列

子组件。如果prop设置为true，我希望包含一个特定的

列
子组件。我试过逻辑&&和三元运算符。问题是我无法将任何空值或未定义的值传递给
DataTable
。当
this.props.hasmidleName
为false时，逻辑&&和三元运算符似乎向
数据表
提供了一个false、null或未定义的值。当
this.props.hasmidleName
为false时，如何修复此代码，使我不传递任何虚假值

<DataTable dataUrl={this.props.url}>
    <Column Header={"First Name"} />
    { this.props.hasMiddleName &&
       <Column Header={"Middle Name"} />
    }
    <Column Header={"Last Name"} />
</DataTable>


{this.props.hasmidleName&&
}
您应该在另一个函数中创建子函数数组

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 dataUrl={this.props.url}>
    {this.renderChildren()}
</DataTable>