在父組件內有條件地渲染子組件

Question

我有一個具有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>

Answer 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>