我可以向 React 片段添加键props吗?

IT技术 javascript reactjs jsx
2021-03-09 00:22:39

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>

这给了我警告:

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

这将删除警告,但不会生成我想要的 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向片段 ( <> </>)添加props

如何解决这个问题?


我正在使用 React 16.12.0

2个回答

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

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