30天用React打造AI工具箱 Day9

React的清單渲染：用map生成元件

前一天我們學了條件渲染，今天要學的是清單渲染。很多時候資料是一組陣列，例如待辦清單、留言串、使用者列表，我們需要把陣列轉換成多個JSX元素，這就是清單渲染的任務。

map渲染

我們通常用陣列的map方法，讓每個元素對應一個元件。

export default function Fruits(){
  const fruits = ["蘋果","香蕉","葡萄"]

  return (
    <ul className="list-disc pl-6">
      {fruits.map(fruit=><li key={fruit}>{fruit}</li>)}
    </ul>
  )
}

這裡我們把fruits.map(...)把每個水果轉成li，
且一定要加key，React才能正確追蹤元素。這裡用fruit當key。

物件陣列

實際上的清單通常是物件陣列。

export default function Users(){
  const users = [
    { id:1, name:"小明", age:18 },
    { id:2, name:"小美", age:20 },
    { id:3, name:"小華", age:22 },
  ]

  return (
    <div className="space-y-2">
      {users.map(user=>(
        <div key={user.id} className="p-3 border rounded">
          <p>姓名：{user.name}</p>
          <p>年齡：{user.age}</p>
        </div>
      ))}
    </div>
  )
}

這裡用user.id當key

為什麼需要key？

假設陣列內容有增刪，key能幫助React判斷哪些元素要保留、哪些要刪掉或新增。
如果不用key，React會用索引當key，可能會造成畫面更新錯亂。
所以最好可以用一個id當作key

範例：靜態的待辦清單

我們先做一個靜態的版本，明天會再加上互動

export default function TodoList(){
  const todos = [
    { id:1, text:"學React", done:false },
    { id:2, text:"寫Day9文章", done:true },
  ]

  return (
    <ul className="space-y-2">
      {todos.map(todo=>(
        <li key={todo.id} className="p-2 border rounded">
          <span className={todo.done ? "line-through text-gray-400" : ""}>
            {todo.text}
          </span>
        </li>
      ))}
    </ul>
  )
}