JSX中的條件渲染

Question

如何使用JSX進行條件渲染？

例如，我在這里有div，如果props的值為null，則要渲染文本“ NO IDEA”，否則，如果其不等於null，則渲染props。

例如：

<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是否可用/布爾值中解析為true，然后使用true值，否則使用false值。

或者，甚至使用||以更簡單的語法 ：

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

僅當布爾值中解析的date值為true時，才會呈現日期，否則將呈現“ NO IDEA”。