如何使用 JSX 进行条件渲染？
例如，我在这里有 div，如果道具的值为 null，我想在其中呈现文本“NO IDEA”，否则如果道具不等于 null，则呈现道具。
例如：
<div>{ return this.props.date === null ? 'NO IDEA' : this.props.date }</div>
我试过了，但没有成功。知道这里做错了什么吗？
提前致谢！
【问题讨论】：
return。这在文档中有所介绍：reactjs.org/docs/…
标签： javascript reactjs jsx
首先，你不需要在表达式块中使用return 语句。接下来，不要只检查null，它可能是undefined 而不是：
<div>{ this.props.date ? this.props.date : 'NO IDEA' }</div>
这只是检查date 是否可用/是否以布尔值解析为真，然后使用真值，否则使用假值。
或者，即使在更简单的语法中使用||：
{ this.props.date || 'NO IDEA' }
仅当日期值以布尔值解析为 true 时才会呈现日期，否则将呈现“NO IDEA”。
【讨论】：
null 检查是否合适取决于应用程序；不是由我们决定或决定的。但如果你要去，为什么不直接{ this.props.date || 'NO IDEA' }？
您可以简单地使用基于 this.props.date 的三元运算符，因此您不需要在此处返回
<div> {this.props.date === null ? 'NO IDEA' : this.props.date }</div>
【讨论】：