当前位置：首页 > React

react如何遍历

2026-01-13 09:57:28React

遍历数组或对象的方法

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

使用map遍历数组
map是遍历数组并返回新数组的高阶函数，适合渲染列表。

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

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

key属性是必需的，用于优化React的渲染性能。

使用forEach遍历数组
forEach仅执行遍历操作，不返回新数组，适合执行副作用操作。

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

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

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

遍历对象
使用Object.keys()、Object.values()或Object.entries()转换为数组后遍历。

const user = { name: 'Alice', age: 25, role: 'Developer' };

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

条件渲染与遍历结合

在遍历时可通过逻辑判断动态渲染内容。

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

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

使用`filter`预处理数据

结合filter过滤数据后再遍历。

react如何遍历

const products = [
  { id: 1, name: 'Laptop', inStock: true },
  { id: 2, name: 'Phone', inStock: false },
];

function ProductList() {
  return (
    <ul>
      {products
        .filter(product => product.inStock)
        .map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
    </ul>
  );
}