当前位置：首页 > React

react如何迭代

2026-02-25 23:46:32React

在 React 中迭代数据

React 提供了多种方法来迭代数据并渲染列表。以下是常见的几种方式：

使用 map 方法

map 是 JavaScript 数组方法，常用于在 React 中渲染列表。它返回一个新数组，适合将数据数组转换为 React 元素数组。

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

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

使用 key 属性

当渲染列表时，每个子元素应该有一个唯一的 key 属性。这帮助 React 识别哪些项目被更改、添加或删除。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

使用 forEach 或其他循环方法

虽然 map 是最常用的方法，但也可以使用其他循环方法如 forEach，不过需要额外步骤来收集结果。

const numbers = [1, 2, 3];
const listItems = [];

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

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

使用 for 循环

传统的 for 循环也可以用于迭代，但不如 map 简洁。

const fruits = ['Apple', 'Banana', 'Cherry'];
const fruitItems = [];

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

function FruitList() {
  return <ul>{fruitItems}</ul>;
}

使用 React.Children.map

当需要迭代子组件时，可以使用 React.Children.map。

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

使用第三方库如 lodash

如果项目中使用 lodash，可以利用其 _.map 方法进行迭代。

import _ from 'lodash';

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

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