react 條件渲染

1、可以使用if
2、運算子&&

{unreadMessages.length > 0 &&
	<h2>
		You have {unreadMessages.length} unread messages.
	</h2>
}

之所以能這樣做，是因為在 JavaScript 中，true && expression 總是會返回 expression, 而 false && expression 總是會返回 false。

因此，如果條件是 true，&& 右側的元素就會被渲染，如果是 false，React 會忽略並跳過它。

請注意，返回 false 的表示式會使 && 後面的元素被跳過，但會返回 false 表示式。在下面示例中，render 方法的返回值是

。

render() {
  const count = 0;
  return (
    <div>
      { count && <h1>Messages: {count}</h1>}
    </div>
  );
}

3、三目運算子 a ? 1 : 2