React JSX:条件数组中的唯一键提示

Question

在一个没有子项的React组件中,由于我在JSX条件中使用了一个数组,我得到了"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>

我理解为什么在渲染子组件时需要关键道具,但是当"数组中的子"是像这样的任意子元素集时,如何满足React/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>;
}

在根上提供密钥告诉React在item.sale更改时如何协调列表.

我倾向于发现这也更容易阅读.