javascript - 在父组件内有条件地渲染子组件
问题描述
我有一个包含子组件的父DataTable
组件Column
。Column
如果 prop 设置为 true,我想包含一个特定的子组件。我已经尝试过逻辑 && 和三元运算符。问题是我不能将任何 null 或 undefined 值传递给DataTable
. 逻辑 && 和三元运算符似乎提供了一个 false、null 或 undefined 值作为DataTable
whenthis.props.hasMiddleName
为 false 的子值。如何修复此代码,以便在为 false 时不传递任何虚假值this.props.hasMiddleName
?
<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
调用这个函数,它将渲染它的孩子。
<DataTable dataUrl={this.props.url}>
{this.renderChildren()}
</DataTable>
推荐阅读
- python - 具有2个属性的类在python中将整数转换为罗马
- flutter - 如何在 Flutter 中一次只在屏幕上显示一个表单域?
- google-cloud-platform - 由于嵌入式浏览器不存在,Google 想要阻止 OAuth 登录
- node.js - 回复错误:达到 ERR 最大客户端数 - Redis
- php - 如何防止php联系表单重定向到另一个页面?
- linux - perl shebang:`“-Mstrict”为时已晚`
- c++ - 为什么 std::basic_fstream
不行吗? - python - 从databricks中的python代码访问文件
- javascript - 在 Vue.js 和 Shopify 中使用 AJAX 从购物车中永久删除商品
- swift - SwiftUI how to make List and Section transparent