传递“key”参数来反应组件

Question

我正在尝试将名称为“键”的参数传递给反应组件，但它不起作用。如果我使用“ keyy ”而不是“key”，那么它就可以了。

对我来说，“key”是受限制的关键字，我不能将其用作参数名称。

这是真的吗？

这就是我的榜样：

render() {
   <MyComponent key='apple'
                keyy='pear'>
}

Answer 1

是的，确实如此，键是受限制的关键字，并且不会作为道具传播。

  

键用作React的提示，但它们不会传递给您的组件。如果组件中需要相同的值，请将其明确地作为具有不同名称的道具传递：

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

  

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

在docs

中阅读更多内容

Answer 2

是保留key关键字，React用它来识别html元素，它应该是唯一的。它有助于提高性能。 我们应该为每个孩子添加一把钥匙。 这样React可以处理最小的DOM更改。

From React Docs：

  

键帮助React识别哪些项目已更改，已添加或已删除。应该为数组内部的元素赋予键，以使元素具有稳定的标识。数组中使用的键在其兄弟姐妹中应该是唯一的。然而，他们并不需要具有全球独特性。键可以作为React的提示，但它们不会传递给您的组件。如果组件中需要相同的值，请将其明确地作为具有不同名称的道具传递。

Answer 3

key是保留字。

来自here：

  

键帮助React识别哪些项目已更改，已添加或已删除。应该给出数组内部元素的键，以使元素具有稳定的标识：

     

选择密钥的最佳方法是使用在其兄弟姐妹中唯一标识列表项的字符串。大多数情况下，您会使用数据中的ID作为密钥。

This也很好，并解释了为什么React使用key param，以及有什么好处。您会发现key参数是React 对帐算法的基石。

除了key param之外，还有一些你不应该使用的保留字，例如：

ref和dangerouslySetInnerHTML

您使用的后者dangerouslySetInnerHTML代替DOM innerHTML

签入here了解详情。