当前位置：首页 > React

react如何循环列表

2026-03-11 07:13:53React

使用map方法循环列表

在React中，最常用的循环列表方法是使用JavaScript的map函数。map函数会遍历数组中的每个元素，并返回一个新的数组。

const items = ['Apple', 'Banana', 'Orange'];

function ListComponent() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

为循环项添加key属性

React要求每个循环生成的元素都必须有一个唯一的key属性，这有助于React识别哪些元素发生了变化。

react如何循环列表

const todos = [
  { id: 1, text: 'Learn React' },
  { id: 2, text: 'Build a project' }
];

function TodoList() {
  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </div>
  );
}

在循环中使用条件渲染

可以在循环中结合条件判断来渲染不同的内容。

react如何循环列表

const numbers = [1, 2, 3, 4, 5];

function NumberList() {
  return (
    <ul>
      {numbers.map(number => (
        number % 2 === 0 
          ? <li key={number}>Even: {number}</li>
          : <li key={number}>Odd: {number}</li>
      ))}
    </ul>
  );
}

使用索引作为key的注意事项

当没有唯一ID时可以使用索引作为key，但这可能导致性能问题或bug，特别是在列表会重新排序时。

const names = ['Alice', 'Bob', 'Charlie'];

function NameList() {
  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

循环渲染组件

可以直接循环渲染自定义组件。

function Item({ name }) {
  return <li>{name}</li>;
}

function GroceryList() {
  const groceries = ['Milk', 'Bread', 'Eggs'];

  return (
    <ul>
      {groceries.map((grocery, index) => (
        <Item key={index} name={grocery} />
      ))}
    </ul>
  );
}