爲什麼我在使用碎片時避免使用密鑰，而在使用陣列時避免使用密鑰？

基本上，這沒有任何警告：

<div> 
    <h1>test1</h1> 
    {Math.random() > 0.5 ? <h1>test1</h1> : null} 
    <h1>test1</h1> 
</div>

（即使有些孩子可以重新排序

但是，這觸發了臭名昭著的Each child in an array or iterator should have a unique "key" prop. ：

<div>{[ 
    <h1>test2</h1>, 
    <h1>test2</h1>, 
    <h1>test2</h1> 
]}</div>

所以，當過濾元素的子元素時，我有警告。也許在片段中有某種隱含的鍵？

2016-01-18 damio

隱式鍵是元素相對於其同級顯示的順序。即0,1,2 ...您可以在React開發工具中看到它：這是data-reactid屬性的最後一個數字。

key的目的是優化虛擬DOM差異。數組的問題在於它們是動態的。如果您有一個數組生成元素[A，B，C，D，E]，然後移除第一個元素，則新元素將變爲[B，C，D，E]。然後，React將B與A，C到B，D到C，E到D進行比較，並更改每個單個節點。

如果您提供一個唯一標識每個元素的鍵，React將知道A已被刪除，然後將B與B，C到C，D到D和E到E進行比較。這允許更高效DOM更改。

React生成此警告，因爲它知道隱式數組鍵的不可靠性。它要求您提供一些優化幫助。你的第一個片段也是一個不可靠隱式鍵的例子。但它更多是一個邊緣案例。

2016-01-19 00:23:34

我找到了一個解決方案：只需使用React.children.map過濾孩子。

像這樣：

var children = React.Children.map(this.props.children, child => { 
    return child.props.to_be_filtered ? null : child; 
    });

，然後<div>{children}</div>直接。

你也可以通過類似改造他們：

var children = React.Children.map(this.props.children, child => { 
    return <li>child</li>; 
    });

沒有任何預兆的鑰匙丟失：d（讓你的API簡單得多）

2016-01-20 19:05:30 damio

回答