陣營JSX：唯一鍵道具在有條件的陣列

Question

在孩子少陣營組成部分，我得到了「唯一關鍵道具」的錯誤，由於我使用的磁盤陣列內部的JSX條件：

每陣列中的孩子應該有一個獨特的「鑰匙」道具。

多數民衆贊成引發錯誤的代碼如下所示：

<dl> 
    { item.sale ? 
    [<dt>Sale</dt>,<dd className="formatted">{item.sale}</dd>,<dt>SRP</dt>,<dd>{item.srp}</dd>] : 
    [<dt>Price</dt>,<dd className="formatted">{item.srp}</dd>] 
    } 
</dl> 

我明白why the key prop is needed繪製子組件的時候，但我怎麼滿足所反應，和/ JSX當「孩子在數組」是一個任意這樣的子元素集？

Answer 1

React無法知道您的數組是靜態的，所以您會收到警告。在這裏做的最實際的辦法就是先寫一樣的東西：

var dl; 
if (item.sale) { 
    dl = <dl key="sold"> 
    <dt>Sale</dt> 
    <dd className="formatted">{item.sale}</dd> 
    <dt>SRP</dt> 
    <dd>{item.srp}</dd> 
    </dl>; 
} else { 
    dl = <dl key="unsold"> 
    <dt>Price</dt> 
    <dd className="formatted">{item.srp}</dd> 
    </dl>; 
} 

提供根鍵告訴陣營應該如何當item.sale變化調和名單。

我傾向於發現這也更容易閱讀。