我可以向 React 片段添加密钥道具吗？

javascript reactjs jsx

2022-08-30 02:20:06

我正在 React 中生成一个：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>

这给了我一个警告：

警告：列表中的每个孩子都应该有一个唯一的“key”属性。

这将删除警告，但不会生成我想要的 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

答案 1

要向片段添加密钥，您需要使用完整的片段语法：

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

在此处查看文档 https://reactjs.org/docs/fragments.html#keyed-fragments

答案 2

是的，您可以在下面的形式中添加一个密钥 Fragment，这在片段的较短版本中是不可能的（即，<></>）

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

参考资料