当前位置：首页 > React

react如何遍历数组

2026-03-31 18:23:05React

遍历数组的方法

在React中遍历数组并渲染元素，可以通过以下几种方式实现。每种方法适用于不同场景，具体选择取决于需求。

使用`map`方法

map是最常用的方法，它会返回一个新数组，适合将数组数据转换为React元素。

react如何遍历数组

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

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

使用`forEach`方法

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`循环

传统的for循环适用于需要更复杂逻辑的场景。

react如何遍历数组

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>;
}

使用`for...of`循环

for...of循环适合遍历可迭代对象，语法更简洁。

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

for (const item of items) {
  listItems.push(<li key={index}>{item}</li>);
  index++;
}

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

使用`React.Children`和`React.cloneElement`

如果数组是React的子元素，可以使用React.Children和React.cloneElement进行遍历和操作。

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

function App() {
  return (
    <List>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </List>
  );
}