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>
来源：
