JavaScript的“true/false && expression”逻辑表达式

true/false && expression

在学习react的过程中，遇到了如下一个方法：

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

该方法中，定义了一个未读消息unreadMessages数

然后返回一个提醒你还有多少未读消息的一段代码

其中的核心代码：

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

&&左边的表达式判断消息数是否大于0，右边表达式渲染还有多少条未读消息数；

之所以能这样做，是因为在 JavaScript 中

true && expression 总是返回 expression

false && expression 总是返回 false。

 

如果条件是 true，&& 右侧的元素就会被渲染

如果是 false，React 会忽略并跳过它。