当前位置：首页 > React

react如何写列表

2026-03-10 19:32:27React

渲染列表的方法

在React中，可以使用map方法遍历数组数据并渲染列表元素。以下是常见的实现方式：

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

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

使用key的注意事项

React要求列表中的每个元素都有一个唯一的key属性，这有助于提高渲染性能。理想情况下应该使用数据中的唯一ID而非数组索引：

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' }
];

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

条件渲染列表

可以在渲染前对数据进行过滤处理：

function ListComponent() {
  const filteredItems = items.filter(item => item.price > 10);

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

列表组件封装

对于复杂的列表，可以将其封装为独立组件：

react如何写列表

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

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