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

时间:2019-08-26 15:20:55

标签: javascript reactjs

我有一个父组件DataTable和一个Column子组件。如果prop设置为true,我想包括一个特定的Column子组件。我尝试了逻辑&&和三元运算符。问题是我无法将任何null或未定义的值传递给DataTable。当DataTable为false时,逻辑&&和三元运算符似乎为this.props.hasMiddleName的子代提供了错误,空值或未定义的值。我该如何解决此代码,以便在this.props.hasMiddleName为假时不传递任何虚假值?

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

1 个答案:

答案 0 :(得分:2)

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

TypeError: Cannot read property 'confirmToken' of undefined

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 } 内部,您调用wich函数将其呈现为子级。

DataTable