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 会忽略并跳过它。