Question

我在React中生成了dl：

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

这给了我警告：

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

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

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

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

我可以在React片段中添加关键道具吗？

2 个答案: