在父组件内有条件地渲染子组件答案

【问题标题】：Conditionally Render Child Component within Parent Component在父组件内有条件地渲染子组件
【发布时间】：2019-08-26 15:20:55
【问题描述】：

我有一个父组件DataTable，它有Column 子组件。如果 prop 设置为 true，我想包含一个特定的 Column 子组件。我已经尝试过逻辑 && 和三元运算符。问题是我不能将任何空值或未定义值传递给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>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您应该在另一个函数中创建一个子数组。

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>

【讨论】：