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

Question

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

在我看来，“key”是一个受限关键字，我不能将它用作参数名称。

真的吗？

那是我的例子：

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

原文由 zappee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，没错， key 是一个受限关键字，不会作为 props 传播。

---

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

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

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

在 文档 中阅读更多内容

原文由 Lyubomir 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

来自 React 文档：

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

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 3.0 许可协议