当前位置：首页 > React

react组件如何遍历

2026-03-30 19:18:19React

遍历数组渲染组件

在React中，可以通过map方法遍历数组并渲染组件。map方法会返回一个新的数组，其中每个元素都是对原数组元素调用回调函数的结果。

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

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

遍历对象渲染组件

对于对象，可以先使用Object.keys()、Object.values()或Object.entries()方法将其转换为数组，然后再进行遍历。

react组件如何遍历

const user = {
  name: 'John',
  age: 30,
  email: 'john@example.com'
};

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

使用唯一key属性

在遍历渲染组件时，必须为每个子元素提供唯一的key属性。这有助于React识别哪些元素发生了变化，提高渲染性能。避免使用数组索引作为key，除非列表是静态的且不会重新排序。

react组件如何遍历

const todos = [
  { id: 1, text: 'Learn React' },
  { id: 2, text: 'Build a project' }
];

function TodoList() {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

条件渲染与遍历结合

可以在遍历过程中结合条件判断，实现更灵活的渲染逻辑。

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

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

使用Fragment包裹多个元素

当需要遍历渲染多个相邻元素而不想添加额外DOM节点时，可以使用React Fragment。

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

function TagList() {
  return (
    <>
      {tags.map(tag => (
        <span key={tag}>{tag}</span>
      ))}
    </>
  );
}