当前位置：首页 > React

react如何迭代循环

2026-01-24 01:40:42React

循环渲染列表数据

在React中，可以使用map()方法迭代数组并渲染列表。map()会返回一个新的数组，其中包含对原数组每个元素调用回调函数的结果。

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

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

添加唯一key属性

当渲染列表时，需要为每个列表项提供一个唯一的key属性。这个key帮助React识别哪些项目被更改、添加或删除。理想情况下，key应该来自数据中的唯一ID。

const todos = [
  { id: 1, text: 'Learn React' },
  { id: 2, text: 'Build 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>
  );
}

处理空数组情况

当数据可能为空时，可以先进行检查，避免渲染空列表。

function UserList({ users }) {
  if (!users.length) {
    return <p>No users found</p>;
  }

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

使用Fragment简化结构

当不需要包裹元素时，可以使用<React.Fragment>或简写<>来避免添加额外的DOM节点。

function Glossary({ items }) {
  return (
    <>
      {items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </>
  );
}

循环嵌套组件

可以将循环逻辑封装在子组件中，使父组件更简洁。

react如何迭代循环

function ListItem({ item }) {
  return <li>{item.name}</li>;
}

function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
}