React 中的列表渲染

在 React 中，列表渲染是一種常見的操作，用於將資料列表渲染為頁面上的元素，這在頁面中是十分常見的一種形式。

使用 map 方法進行列表渲染

這邊有一個 people 的陣列，其中包含了三個物件，每個物件都有 id、name 和 age 屬性：

const people = [
  {
    id: 0,
    name: '張三',
    age: 24
  },
  {
    id: 1,
    name: '李四',
    age: 31
  },
  {
    id: 2,
    name: '陳五',
    age: 42
  }
];

在 React 中，當我們需要在 JSX 中使用 JavaScript 時，需要使用大括號 {} 進入 JavaScript 模式，以下是如何使用 map() 函式來渲染 people 陣列的範例：

function List() {
  return (
    <ul>
	  // 使用大括號 {} 進入 JavaScript 模式
      {
        people.map((person) => (
	      <li key={person.id}>{person.name} 今年 {person.age} 歲</li>
	    ))
	  }
    </ul>
  );
}

在這個範例中，我們遍歷 people 陣列，為每筆資料創建一個 <li> 元素。

請注意，我們在每個 <li> 元素上都使用了 key 屬性，key 屬性在 React 列表渲染中十分重要，並且該屬性的值必須是唯一的，通常會使用資料的唯一 ID 作為 key。

渲染處理後的資料

const people = [
  {
    id: 0,
    name: '張三',
    age: 24
  },
  {
    id: 1,
    name: '李四',
    age: 31
  }
  {
    id: 2,
    name: '陳五',
    age: 42
  }
];

假如我們希望過濾出 age > 30 的人，可以先使用陣列的 filter 方法進行資料的處理，最後再用這筆過濾的資料去進行列表渲染。

function List() {
  const filteredPeople = people.filter((person) => person.age > 30);

  return (
    <ul>
      {
        filteredPeople.map((person) => (
	      <li key={person.id}>{person.name} 今年 {person.age} 歲</li>
	    ))
	  }
    </ul>
  );
}

结語

React 中的列表渲染是一個在網頁開發中常見且重要的技巧，透過 map 或 filter 函式，我們能夠輕鬆處理資料陣列，並將其渲染為頁面上的元素。

我們也了解到在列表渲染過程中，key 屬性的重要性，該屬性的值必須是唯一的，通常會使用資料的唯一 ID 做為 key。