传递"key"参数来反应组件

Question

我试图将名称为" key " 的参数传递给react组件,但它不起作用.如果我使用" keyy "而不是"key"那么它可以工作.

对我来说,"key"是一个受限制的关键字,我不能将它用作参数的名称.

真的吗？

这是我的例子:

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

Answer 1

是的,这是真的,key是受限制的关键字,不会作为道具传播.

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

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

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

阅读文档中的更多内容

Answer 2

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

来自 React 文档：

键帮助 React 识别哪些项目已更改、添加或删除。应该为数组内的元素提供键，以赋予元素一个稳定的身份。数组中使用的键在其同级中应该是唯一的。但是，它们不需要是全局唯一的。键用作 React 的提示，但它们不会传递给您的组件。如果您的组件中需要相同的值，请将其作为具有不同名称的 prop 显式传递。