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

Question

我dl在 React 中生成一个：

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

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

这给了我警告：

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

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

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

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

而且我无法key向片段 ( <> </>)添加道具。

如何解决这个问题？

---

我正在使用 React 16.12.0。

Answer 1

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

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

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

Answer 2

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

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

以供参考