我可以在反应碎片上加一个关键道具吗?

我正在生成一个 dl反应:

<dl>
{
highlights.map(highlight => {
const count = text.split(highlight).length - 1;


return (
<>
<dt key={`dt-${highlight.id}`}>{highlight}</dt>
<dd key={`dd-${highlight.id}`}>{count}</dd>
</>
);
})
}
</dl>

这给了我一个警告:

警告: 列表中的每个子元素都应该有一个独特的“键”道具。

这将删除警告,但不会生成我想要的 HTML:

<dl>
{
highlights.map(highlight => {
const count = text.split(highlight).length - 1;


return (
<div key={highlight.id}>
<dt>{highlight}</dt>
<dd>{count}</dd>
</div>
);
})
}
</dl>

我不能添加一个 key道具片段(<> </>)。

怎样才能解决这个问题?


我正在使用反应 16.12.0

48253 次浏览

要向片段添加键,需要使用完整的片段语法:

<React.Fragment key={your key}>
...
</React.Fragment>

看看这里的医生 https://reactjs.org/docs/fragments.html#keyed-fragments

您还可以使用这种方式自动为组件列表分配键

React.Children.toArray(someData.map(data=><div>{data.name}</div>))

是的,您可以在下面的表单片段中添加一个键,这在较短的片段版本(即 < > )中是不可能的

<Fragment key={your key}></Fragment>

供参考