列表渲染

在 React 中,你可以使用数组的 map 方法来渲染列表元素。

渲染多个组件

你可以通过使用 在 JSX 中构建一个元素集合。

使用 map 渲染列表

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

return (
  <ul>{listItems}</ul>
);

基础列表组件

通常你会将列表渲染到一个组件中。

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
return <NumberList numbers={numbers} />;

Keys

Keys 帮助 React 识别哪些元素改变了/添加了或被删除了。应该给数组中的每个元素赋予一个确定的标识。

使用 key

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

key 的选择

• 最佳: 使用数据中唯一的 ID
• 备选: 使用索引 (但不推荐在列表会重排时使用)

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

用 key 提取组件

key 只有在数组的上下文中才有意义。例如,如果你提取一个 ListItem 组件,应该把 key 保留在数组中的 <ListItem /> 元素上,而不是放在 ListItem 组件自身的 <li> 根元素上。

下一步

继续学习保持组件纯粹。