javascript - 我可以向 React 片段添加 key prop 吗？

Question

我正在生成一个dl在 react 中:

<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>

这给了我警告:

Warning: Each child in a list should have a unique "key" prop.

这将删除警告，但不会生成我想要的 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支撑到片段( <> </> )。

如何解决这个问题？

<小时/>

我正在使用 React 16.12.0 .

Answer 1

要将键添加到片段，您需要使用完整的片段语法:

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

请参阅此处的文档 https://reactjs.org/docs/fragments.html#keyed-fragments