建立 2026-09-15 更新 2026-09-15

條件與列表

畫面常依資料決定「畫不畫」與「畫幾筆」。JSX 裡用 JavaScript 的條件與 .map() 完成，不必另外學模板語言。

條件渲染

三元運算子：二選一。

{isLoading ? <p>載入中…</p> : <UserList users={users} />}

&&：條件為真才畫後面。注意不要用 count && <List />，因為 count 為 0 時會把 0 畫到畫面上；布林值較安全：

{isOpen && <Modal />}
{items.length > 0 && <List items={items} />}

什麼都不畫就回傳 null。

列表與 key

陣列用 .map() 轉成元件陣列：

function TodoList({ todos, onToggle }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.done}
              onChange={() => onToggle(todo.id)}
            />
            {todo.text}
          </label>
        </li>
      ))}
    </ul>
  );
}

key 告訴 React「這一筆是同一筆資料」，用來對應更新與動畫。規則：

用資料裡穩定且獨特的 id，不要用陣列 index（除非清單永遠不排序、不增刪）。
key 只在兄弟節點之間獨特即可，不必全域唯一。
不要用亂數當 key，每次渲染都會被當成新項目，state 會丟。

從清單衍生畫面

過濾、排序先算出新陣列，再 map。不要在 map 裡改原始陣列：

const visible = todos.filter((todo) => !todo.done);

官方對照：Conditional Rendering、Rendering Lists。兩個元件要共用這份 todos 時，見提升 State。