当前位置：首页 > React

react如何遍历

2026-03-30 15:45:24React

遍历数组或对象的方法

在React中遍历数组或对象是常见的操作，通常用于渲染列表或动态生成组件。以下是几种常用的遍历方法：

使用`map`遍历数组

map是遍历数组并返回新数组的最常用方法，适合渲染列表。

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

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

使用`forEach`遍历数组

forEach用于遍历数组但不返回新数组，适合执行操作而非渲染。

react如何遍历

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

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

function ListComponent() {
  return <ul>{itemList}</ul>;
}

使用`for...of`遍历数组

for...of是ES6引入的语法，适合遍历可迭代对象（如数组）。

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

for (const [index, item] of items.entries()) {
  itemList.push(<li key={index}>{item}</li>);
}

function ListComponent() {
  return <ul>{itemList}</ul>;
}

使用`Object.keys`或`Object.entries`遍历对象

遍历对象时，通常需要先获取键或键值对。

react如何遍历

const user = { name: 'John', age: 30, city: 'New York' };

function UserInfo() {
  return (
    <ul>
      {Object.entries(user).map(([key, value]) => (
        <li key={key}>
          {key}: {value}
        </li>
      ))}
    </ul>
  );
}

使用`filter`结合`map`过滤并遍历

如果需要过滤数组后再遍历，可以链式调用filter和map。

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

function EvenNumbers() {
  return (
    <ul>
      {numbers
        .filter((num) => num % 2 === 0)
        .map((num) => (
          <li key={num}>{num}</li>
        ))}
    </ul>
  );
}

使用`reduce`遍历并累积结果

reduce适合将数组转换为单一值或复杂结构。

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

function ListComponent() {
  const listItems = items.reduce((acc, item, index) => {
    acc.push(<li key={index}>{item}</li>);
    return acc;
  }, []);

  return <ul>{listItems}</ul>;
}