当前位置：首页 > React

react如何循环列表

2026-01-24 22:21:55React

循环列表的方法

在React中循环列表可以通过多种方式实现，以下是几种常见的方法：

使用map方法

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

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

使用forEach方法

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

items.forEach((item, index) => {
  listItems.push(<li key={index}>{item}</li>);
});

function List() {
  return <ul>{listItems}</ul>;
}

使用for循环

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

for (let i = 0; i < items.length; i++) {
  listItems.push(<li key={i}>{items[i]}</li>);
}

function List() {
  return <ul>{listItems}</ul>;
}

注意事项

在循环渲染列表时，必须为每个列表项提供一个唯一的key属性，这有助于React识别哪些项目被更改、添加或删除。

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

如果列表项没有唯一的ID，可以使用数组索引作为key，但这可能会导致性能问题或状态错误，特别是在列表顺序可能变化的情况下。

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

循环渲染组件

也可以循环渲染自定义组件：

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

function List() {
  return (
    <ul>
      {items.map((item) => (
        <Item key={item.id} name={item.name} />
      ))}
    </ul>
  );
}

处理空列表

在渲染列表之前，可以添加条件判断来处理空列表的情况：

react如何循环列表

function List({ items }) {
  if (!items.length) {
    return <p>No items found</p>;
  }

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}