Question

我正在尝试在reactjs中创建一个简单的应用程序。我在互联网上找到了一个示例，代码如下所示。我的问题是关于以下语法：

{this.props.items.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}

关键含义是什么

代码：

class TodoList extends React.Component {
render() {
return (
  <ul>
    {this.props.items.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

} }

Answer 1

键可帮助React识别哪些项目已更改，添加或为删除。键应赋予数组内的元素以给出这些元素具有稳定的身份。

React docs - List and Keys

Answer 2

键帮助React确定哪些项已更改，添加或删除。

当您处理列表时，它在内部用于唯一标识项目。

反应使用键进行智能渲染和搜索。

请参阅https://reactjs.org/docs/lists-and-keys.html

使用键可以动态创建具有唯一索引的Content元素，当我们将来添加或删除某些元素或更改动态创建的元素的顺序时，
反应将使用键值来跟踪每个元素。

Answer 3

“键”是一种特殊的字符串属性，您需要在添加时创建元素列表。
应将键赋予数组中的元素以赋予元素具有稳定的身份
因此Keys将帮助React识别出哪个元素发生了变化，删除或添加。
拇指法则是在map（）函数内部使用“键”
当孩子拥有钥匙时，React使用钥匙来匹配子钥匙。原始树，后继树中有子树
键用作React的提示，但不会传递给您组件。如果您在组件中需要相同的值，请传递它明确地作为具有不同名称的道具：
```
const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);
```

在上面的示例中，Post组件可以读取props.id，但不能读取props.key

希望其清除。

this.props的键是什么意思

3 个答案: