React 條件渲染

在 React 中，我們可以利用 JavaScript 的條件運算特性，在 JSX 中根據狀態或 props 的不同，渲染不同內容。

常見的條件渲染方法

if/else 條件分支

可在函式組件內先進行條件判斷，再決定返回哪個元素：

function Greeting({ isLoggedIn = false }) {
  if (isLoggedIn) {
    return <h1>歡迎回來！</h1>;
  }
  return <h1>請先登入。</h1>;
}

三元運算子 (Ternary Operator)

直接在 JSX 內使用，適合簡單的條件判斷：

function Greeting({ isLoggedIn = false }) {
  return (
    <div>
      {isLoggedIn ? <h1>歡迎回來！</h1> : <h1>請先登入。</h1>}
    </div>
  );
}

邏輯與運算子 (Logical &&)

常用於只在條件為真時顯示某部分 UI，如果條件為假則不渲染任何內容（React 會忽略布林值）：

function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>你好！</h1>
      // 底下別忘了要用花括號包裹!!!
      {
	      unreadMessages.length > 0 &&
	      // 底下程式碼以邏輯上來看一直都是條件為真，所以上面的判斷是關鍵
        <h2>你有 {unreadMessages.length} 則未讀郵件。</h2>
      }
    </div>
  );
}

複雜條件處理

• 多重條件： 當條件較複雜時，可以在組件內定義變數或使用函式來決定要渲染哪個元素，這樣可以讓 JSX 更加乾淨。
• 條件樣式與屬性： 除了渲染不同的元素，也可以根據條件改變 CSS 類別或屬性，使用條件運算來決定傳入的 className 或 style。

範例如下：

function Button({ isActive = false }) {
  const buttonClass = isActive ? 'btn-active' : 'btn-inactive';
  return (
    <button className={buttonClass}>
      {isActive ? '啟用' : '停用'}
    </button>
  );
}