使用元素的 id

这里我们有一个传递给我们组件的道具的待办事项列表。

每个待办事项都有 text 和 id 属性。想象一下，id 属性来自后端数据存储区，是一个唯一的数值：

todos = [
  {
    id: 1,
    text: 'value 1'
  },
  {
    id: 2,
    text: 'value 2'
  },
  {
    id: 3,
    text: 'value 3'
  },
  {
    id: 4,
    text: 'value 4'
  },
];

我们将每个迭代列表元素的 key 属性设置为 todo-${todo.id}，以便 react 可以在内部识别它：

render() {
  const { todos } = this.props;
  return (
    <ul>
      { todos.map((todo) =>
        <li key={ `todo-${todo.id}` }>
          { todo.text }
        </li>
      }
    </ul>
  );
}