当前位置：首页 > React

react如何循环

2026-02-11 14:16:46React

React 中循环渲染数据的方法

在 React 中，循环渲染数据通常使用 map 方法，也可以使用 for 循环或其他循环方式，但 map 是最常见和推荐的方法。

使用 `map` 方法循环渲染数组

map 方法可以遍历数组并返回一个新的数组，常用于将数据数组渲染为 React 元素。

const data = ["Apple", "Banana", "Orange"];

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

key 是必需的，用于帮助 React 识别哪些元素发生了变化。
如果数据有唯一标识（如 id），建议使用 key={item.id} 而不是索引。

使用 `for` 循环渲染数据

虽然 map 更常见，但也可以使用 for 循环生成渲染内容。

const data = ["Apple", "Banana", "Orange"];

function List() {
  const items = [];
  for (let i = 0; i < data.length; i++) {
    items.push(<li key={i}>{data[i]}</li>);
  }
  return <ul>{items}</ul>;
}

使用 `forEach` 循环

forEach 也可以用于循环，但需要手动构建渲染数组。

const data = ["Apple", "Banana", "Orange"];

function List() {
  const items = [];
  data.forEach((item, index) => {
    items.push(<li key={index}>{item}</li>);
  });
  return <ul>{items}</ul>;
}

条件循环渲染

可以在循环中加入条件判断，动态决定是否渲染某些内容。

const data = [
  { id: 1, name: "Apple", inStock: true },
  { id: 2, name: "Banana", inStock: false },
  { id: 3, name: "Orange", inStock: true },
];

function List() {
  return (
    <ul>
      {data.map(
        (item) =>
          item.inStock && <li key={item.id}>{item.name} (In Stock)</li>
      )}
    </ul>
  );
}

使用 `React.Children.map` 循环子元素

如果需要循环子组件，可以使用 React.Children.map。

function List({ children }) {
  return (
    <ul>
      {React.Children.map(children, (child, index) => (
        <li key={index}>{child}</li>
      ))}
    </ul>
  );
}