&& 邏輯運算子
使用的語法為{條件式 && 元素}
如果條件是true -> 顯示元素
如果條件是false -> 不顯示元素

舉例：用 &&方法判斷如果有未讀信件 unreadMessages.length，顯示未讀訊息

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

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

|| 邏輯運算子

const Sample = () => {
      const a = true;
      const b = false;

      return (
        <div>
          {
            a && <div>a為true時展示</div>
          }
          {
            b || <div>b為false時展示</div>
          }
        </div>
      )
    }

&& 與 || 原理
a == b && c
-> 代表的是 a == b 為 true 則回傳 c

a == b || c
-> 代表的是 a == b 為 false 則回傳 c

• && 運算子一定要兩邊都是true，結果才為true，所以左邊為 true 時，便會繼續執行右邊
• || 運算子只要其中一個為true，結果就為true，所以左邊為 false 時，還是會執行右邊來判斷是否為true;所以左邊只要是 true，結果就會是 true，便不會繼續執行右邊。