JSX中的Booleans, Null, undefined值

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

// 下面表达式等同于最上面的表达式

{false}
{null}
{undefined}
{true}

一般条件渲染中会用到这个，比如 showHeader 为 true 时，

会被渲染：

  {showHeader && 
}
  

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

  {props.messages.length && }

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

  {props.messages.length > 0 && }

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

  My JavaScript variable is {String(myVariable)}.

来源：

• Booleans, Null, 和 Undefined 被忽略