当前位置：首页 > React

react如何循环

2026-02-26 00:31:13React

循环渲染列表数据

在React中，通常使用map方法循环渲染数组数据。map会遍历数组并返回一个新的React元素数组。

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

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

添加唯一key属性

循环渲染时必须为每个元素提供唯一的key属性，这有助于React识别哪些元素发生了变化。

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

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

条件性循环渲染

可以在循环中加入条件判断，决定是否渲染某些元素。

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

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

使用索引作为key的注意事项

当没有唯一ID时可以使用数组索引作为key，但这可能导致性能问题或状态错误。

const posts = [
  { title: 'Post 1' },
  { title: 'Post 2' }
];

function PostList() {
  return (
    <div>
      {posts.map((post, index) => (
        <Post key={index} title={post.title} />
      ))}
    </div>
  );
}

循环渲染组件

可以直接在循环中渲染自定义组件。

function User({ name }) {
  return <div>{name}</div>;
}

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

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

react如何循环