当前位置：首页 > React

react如何迭代

2026-03-30 16:27:58React

迭代数组

在React中，可以使用map方法迭代数组并渲染元素。map会遍历数组中的每个元素，并返回一个新的数组。

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

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

添加唯一key

当渲染列表时，React需要为每个元素分配一个唯一的key属性。这有助于React识别哪些元素发生了变化。

react如何迭代

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

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

迭代对象

如果需要迭代对象，可以先将对象转换为数组。使用Object.keys()、Object.values()或Object.entries()方法。

react如何迭代

const person = {
  name: 'John',
  age: 30,
  job: 'Developer'
};

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

条件渲染

可以在迭代过程中结合条件判断，决定是否渲染某些元素。

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

function NumberList() {
  return (
    <ul>
      {numbers.map(number => (
        number % 2 === 0 && <li key={number}>{number}</li>
      ))}
    </ul>
  );
}

使用Fragment

当需要返回多个元素但不希望添加额外DOM节点时，可以使用React Fragment。

const tags = ['React', 'JavaScript', 'HTML'];

function TagList() {
  return (
    <>
      {tags.map((tag, index) => (
        <React.Fragment key={index}>
          <span>{tag}</span>
          {index < tags.length - 1 && ', '}
        </React.Fragment>
      ))}
    </>
  );
}