傳遞“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

是key關鍵字是保留的，React使用它來識別html元素，它應該是唯一的。 它有助於提高性能。 我們應該為每個孩子添加一把鑰匙。 這樣React可以處理最小的DOM更改。

來自React Docs ：

密鑰幫助React識別哪些項目已更改，已添加或已刪除。 應該為數組內部的元素賦予鍵，以使元素具有穩定的標識。 數組中使用的鍵在其兄弟姐妹中應該是唯一的。 但是，它們不需要是全球唯一的。 鍵用作React的提示，但它們不會傳遞給您的組件。 如果組件中需要相同的值，請將其顯式傳遞為具有不同名稱的prop。

Answer 3

key是保留字。

從這里 ：

密鑰幫助React識別哪些項目已更改，已添加或已刪除。 應該為數組內部的元素賦予鍵，以使元素具有穩定的標識：

選擇密鑰的最佳方法是使用在其兄弟姐妹中唯一標識列表項的字符串。 大多數情況下，您會使用數據中的ID作為鍵。

這也很好，並解釋了為什么React使用key參數，以及有什么好處。 您會發現key參數是React 協調算法的基石。

---

除了key參數之外，還有一些你不應該使用的保留字，例如：

ref和dangerouslySetInnerHTML

后一個使用dangerouslySetInnerHTML而不是DOM innerHTML

請在此處查看更多詳情。