如何使用 JSX 进行条件渲染？
例如，我在这里有一个 div，我想在其中渲染文本“NO IDEA”，如果 props 的值为 null，否则如果它不等于 null，则渲染 props。
例如：
<div>{ return this.props.date === null ? 'NO IDEA' : this.props.date }</div>
我试过了，但没有成功。知道这里做错了什么吗？
提前致谢！
JSX 中的条件渲染
IT技术
javascript
reactjs
jsx
2021-05-06 04:32:52
2个回答
您可以简单地使用基于 this.props.date 的三元运算符，因此您不需要在此处返回
<div> {this.props.date === null ? 'NO IDEA' : this.props.date }</div>
首先，您不需要return在表达式块内使用语句。接下来，不要只检查 for null，它可能是undefined：
<div>{ this.props.date ? this.props.date : 'NO IDEA' }</div>
这只是检查是否date可用/以布尔值解析为真，然后使用真值，否则使用假值。
或者，即使使用更简单的语法||：
{ this.props.date || 'NO IDEA' }
仅当日期值在布尔值中解析为 true 时才会呈现日期，否则将呈现“NO IDEA”。