当前位置：首页 > React

react 如何循环

2026-02-26 01:00:38React

循环渲染列表

在 React 中，可以通过 map 方法循环渲染列表数据。map 是 JavaScript 数组方法，能够遍历数组并返回新数组。React 利用这一特性动态生成组件列表。

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

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

使用 key 属性

循环渲染时必须为每个子元素添加唯一的 key 属性。React 依靠 key 识别哪些元素发生变化，通常使用数据中的唯一 ID 或索引（不推荐索引，除非列表静态）。

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

条件性循环渲染

结合条件判断实现选择性渲染。可通过 filter 方法过滤数据后再循环渲染。

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

function EvenNumbers() {
  return (
    <div>
      {numbers
        .filter(num => num % 2 === 0)
        .map(num => (
          <span key={num}>{num}</span>
        ))}
    </div>
  );
}

循环渲染组件

直接循环渲染自定义组件，传递数据作为 props。

function TodoItem({ title }) {
  return <li>{title}</li>;
}

const todos = [{ title: 'Task 1' }, { title: 'Task 2' }];

function TodoList() {
  return (
    <ul>
      {todos.map((todo, index) => (
        <TodoItem key={index} title={todo.title} />
      ))}
    </ul>
  );
}

处理空列表

循环前检查数组是否为空，避免渲染无效内容。

const posts = [];

function PostFeed() {
  return (
    <div>
      {posts.length > 0 ? (
        posts.map(post => <Post key={post.id} {...post} />)
      ) : (
        <p>No posts available</p>
      )}
    </div>
  );
}

react 如何循环