JSX中的条件渲染

Question

如何使用JSX进行条件渲染？

例如我在这里有div我想要渲染文字＆＃34; NO IDEA＆＃34;如果道具的值为null，则否则如果它不等于null，则呈现道具。

例如：

<div>{ return this.props.date === null ? 'NO IDEA' : this.props.date }</div>

我试过了，但没有成功。知道这里有什么问题吗？

提前致谢！

Answer 1

你可以简单地使用基于this.props.date的三元运算符，这样你就不需要返回

<div> {this.props.date === null ? 'NO IDEA' : this.props.date }</div>

Answer 2

首先，您不需要在表达式块中使用return语句。接下来，不要只检查null，它可能是undefined而不是：

<div>{ this.props.date ? this.props.date : 'NO IDEA' }</div> 

这只是检查在布尔值中是否有date可用/真解析，然后使用真值，否则使用假值。

或者，即使使用||的简单语法：

{ this.props.date || 'NO IDEA' }

只有在布尔值解析日期值时才会显示日期，否则会呈现“NO IDEA”。