当前位置：首页 > React

react组件如何遍历

2026-02-11 16:19:27React

遍历数组渲染列表

在React中，通过map()方法遍历数组生成元素列表是最常见的方式。需要为每个列表项分配唯一的key属性以优化渲染性能。

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

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

遍历对象渲染键值对

当需要渲染对象时，可通过Object.keys()或Object.entries()转换为数组后再遍历。

const user = { name: 'Alice', age: 25, role: 'Developer' };

function UserInfo() {
  return (
    <div>
      {Object.entries(user).map(([key, value]) => (
        <p key={key}>{`${key}: ${value}`}</p>
      ))}
    </div>
  );
}

条件性遍历

结合filter()或条件判断实现选择性渲染，避免空数据导致的错误。

const data = [1, 2, null, 4];

function FilteredList() {
  return (
    <div>
      {data
        .filter(item => item !== null)
        .map(item => <span key={item}>{item}</span>)
      }
    </div>
  );
}

嵌套遍历

处理多维数组或嵌套对象时，可采用多层map()嵌套。

const matrix = [[1, 2], [3, 4]];

function MatrixTable() {
  return (
    <table>
      <tbody>
        {matrix.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {row.map((cell, cellIndex) => (
              <td key={`${rowIndex}-${cellIndex}`}>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

使用Fragment简化结构

若遍历生成的元素不需要包裹节点，可用<React.Fragment>或简写<>避免额外DOM层级。

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

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

react组件如何遍历