react条件渲染 &&

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    

      
Hello!
      {unreadMessages.length > 0 &&
        

          You have {unreadMessages.length} unread messages.
        
      }
    
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  ,
  document.getElementById('root')
);

之所以能这样做，是因为在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。