【React 學習筆記 EP.07】條件渲染

什麼是條件渲染？

條件渲染是指根據程式當前的狀態 (State) 或屬性 (Props)，動態決定要在網頁上顯示哪些 UI 元素，例如：切換登入與登出按鈕的顯示、在資料載入完成前顯示讀取中圖示。

條件渲染基礎語法

1. if 敘述句：最基礎的 JavaScript 邏輯，適合在 return JSX 之前進行邏輯判斷。
2. 三元運算子：語法為 condition ? true : false，能用於直接寫在 JSX {} 內部的二選一邏輯。
3. 邏輯運算子：語法為 condition && element，用於「若條件成立則顯示，否則什麼都不做」的單向判斷。
4. Early Return：當符合特定錯誤或空狀態時直接回傳元件，避免後續邏輯執行。

常見錯誤與解決方法

1. 把 0 當成 false 處理：count && <div/> 在 count=0 會直接渲染 0，建議改成 count > 0 && ... 或用三元運算子
2. 在 JSX 裡用 if：JSX 內不能直接寫 if (...) {}，建議改用三元運算子、邏輯 AND，或先在 JSX 外計算變數再插入

import { useState } from 'react';

const AuthControl = () => { 
  const [isLoggedIn, setIsLoggedIn] = useState(false); 
  const [items, setItems] = useState([]); 

  const toggleLogin = () => { 
    setIsLoggedIn(!isLoggedIn); 
  }; 

  return ( 
    <div style={{ padding: '20px' }}> 
      <h1>使用者介面</h1>
      
      {/* 1. 三元運算子：根據登入狀態切換文字 */}
      <button onClick={toggleLogin}> {/* 綁定點擊事件 */}
        {isLoggedIn ? '點擊登出' : '點擊登入'} 
      </button>

      {/* 2. 邏輯運算子：登入後才顯示歡迎訊息 */}
      {isLoggedIn && <p>歡迎回來，尊貴的會員！</p>}

      {/* 3. 陣列長度判斷：避免顯示數字 0 的正確寫法 */}
      <div style={{ marginTop: '10px' }}>
        {items.length > 0 ? ( 
          <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>
        ) : (
          <p>目前沒有任何待辦事項。</p>
        )} 
      </div>
    </div>
  );
}

export default AuthControl;