Условный рендеринг в JSX

Question

Как я могу сделать условный рендеринг с JSX?

например, у меня есть div здесь, где я хочу визуализировать текст "NO IDEA", если значение реквизита в нуле, иначе визуализирует реквизиты, если оно не равно нулю.

Например:

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

Я попробовал это, но это не сработало. Есть идеи, что я делаю не так?

Заранее спасибо!

Answer 1

Прежде всего, вам не нужно использовать оператор return внутри блока выражения. Следующее, не проверяйте только на null, это может быть undefined, а точнее:

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

Это просто проверяет, доступно ли date / верно ли проанализировано в логическом значении, затем используйте значение true, иначе используйте значение false.

Или даже в более простом синтаксисе, используя ||:

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

Это будет отображать дату, только если значение даты истинно проанализировано в логическом значении, в противном случае будет отображаться «НЕТ ИДЕИ».

Answer 2

вы можете просто использовать троичный оператор на основе this.props.date, поэтому вам не нужно возвращаться сюда

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