渲染列表 (Rendering Lists)

• 在JSX 中要用 {} 包住 JavaScript 表達式（expression）來回傳元素（例如 map()）
• map() 可以把陣列轉換成一組 JSX 元素
• 每個清單項目需要唯一的 key 屬性（key prop），用來追蹤每個項目，避免重複渲染，通常使用id

範例：

List.js

function List() {
    const items = ["New York", "London", "Tokyo", "Seoul", "Taipei"];
    
    return (
        <>
            <h1>List</h1>
            <ul className="list-group">
                {items.map(item => (
                    <li
                     className="list-group-item" 
                     key={item}
                     >
                        {item}
                    </li>
                ))}
            </ul>
        </>
    );
}

export default List;

App.js

import List from "./List";

function App() {
  return (
    <div className="App">
      <List />
    </div>
  );
}

export default App;

瀏覽器執行畫面：

條件渲染 (Conditional Rendering)

三元運算子

condition ? A : B
{items.length === 0 ? <p>No item found</p> : null}

解釋：

如果 items.length 為 true → 表達式結果：渲染A (No item found)
如果 items.length 為 false → 表達式結果：B (null)，null：畫面上不會渲染任何東西

邏輯AND

condition && A
{items.length === 0 && <p>No item found</p>}

解釋：

如果 items.length === 0 為 true → 表達式結果：渲染 A（No item found）
如果 items.length === 0 為 false → 表達式結果：忽略 false，畫面上不會渲染任何東西

例如：

• true && 1
  → 1
• true && 'Liu'
  → Liu
• false && 'Liu'
  → false

比較

三元運算子 ( ? : )：處理 true 與 false 兩種情況
邏輯 AND ( && )：只處理 true 的情況，false就不顯示

補充：條件樣式渲染 ( Conditional Styling )

在React中，條件樣式渲染可以讓 UI 根據 state 或 props 動態改變外觀
除了內容可以渲染以外，className 及 style 也能根據條件來進行渲染，讓畫面更直覺的反映狀態

範例：

Button.js

import { useState } from "react";

const Button = () => {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <button
        className={isActive ? "enabled" : "disabled"}
        onClick={() => setIsActive(!isActive)}
      >
        {isActive ? "on" : "off"}
      </button>
    </div>
  );
};

export default Button;

App.css

.enabled {
  background-color: green;
  color: white;
}

.disabled {
  background-color: red;
  color: white;
}

App.js

import "./App.css";
import Button from "./Button";

function App() {
  return (
    <div className="App">
      <Button />
    </div>
  );
}

export default App;

程式碼解釋：

• className={isActive ? "enabled " : "disabled "}
  利用三元運算子判斷狀態，套用不同的樣式
• 當 isActive 為 true → 顯示綠色背景，且文字顯示「on」。
• 當 isActive 為 false → 顯示紅色背景，且文字顯示「off」。

瀏覽器執行畫面：