在无子 React 组件中,由于在 JSX 条件中使用数组,我收到了“unique key prop”错误:
Each child in an array should have a unique "key" prop.
触发错误的代码如下所示:
<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渲染子组件时,但是当“数组中的子元素”是这样的任意子元素集时,如何满足 React/JSX 的要求?
最佳答案
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>;
}
在根目录上提供键告诉 React 当 item.sale
更改时它应该如何协调列表。
我倾向于发现这也更容易阅读。
关于reactjs - react JSX : Unique Key Prop in Conditional Array,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21863263/