JSX中的Booleans, Null, undefined值

false, null, undefined, true都是有效的children（子元素）。但是并不会被渲染出来，下面JSX表达式渲染效果是等效的：

<div />

// 下面表达式等同于最上面的表达式
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

一般条件渲染中会用到这个，比如 showHeader 为 true 时， <Header /> 会被渲染：

<div>
  {showHeader && <Header />}
  <Content />
</div>

但是需要注意的是，为0 这种falsy值时，React仍然会被渲染。 例如，下面的做法可能和你期望的会不一致：

<div>
  {props.messages.length && <MessageList  messages={props.messages} />}
</div>

可以使用下面方式修复这个问题：

<div>
  {props.messages.length > 0 && <MessageList  messages={props.messages} />}
</div>

为了显示上面的 null, true | false, undefined 等值， 可以使用 String 方法将其转换为字符串类型

<div>
  My JavaScript variable is {String(myVariable)}.
</div>

来源：

• Booleans, Null, 和 Undefined 被忽略