当前位置：首页 > React

react 如何循环

2026-03-30 17:44:36React

循环渲染列表数据

在 React 中，循环渲染数据通常使用 map 方法处理数组。以下是一个基本示例：

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

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

使用 key 属性注意事项

React 要求为循环生成的元素添加唯一的 key 属性：

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

条件渲染结合循环

可以在循环中结合条件判断实现过滤：

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

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

循环嵌套组件

可以将循环逻辑封装到子组件中：

function Item({ text }) {
  return <li>{text}</li>;
}

function ListContainer() {
  const data = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <ul>
      {data.map((text, i) => (
        <Item key={i} text={text} />
      ))}
    </ul>
  );
}

处理空数据情况

添加空状态处理使组件更健壮：

react 如何循环

function TodoList({ todos }) {
  if (!todos || todos.length === 0) {
    return <p>No todos found</p>;
  }

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

标签: react