react cloneElement 未设置键

IT技术 javascript reactjs
2021-05-11 10:48:24

我正在构建一个动态生成键的表控件(我理解这可能不是一个好主意 - 我想键应该与它代表的数据唯一关联,否则 React 可以为我们生成唯一的 id?),但无论哪种方式似乎没有设置密钥,我不知道为什么。表中的行是使用可在此处找到的函数生成的基本上我有一个辅助组件,它采用一个可选组件来转换所有子元素 - 这是其中一个转换函数(来自TableBody组件):

const transformRows = (keyPrefix) => (children, passthroughProps) => (React.Children.map(children, (c, i) => {
    return React.cloneElement(c, {
        key: `${keyPrefix}-${i}`,
        style: rowStyle,
        className: rowClassName,
        columnDefinitions: columnDefinitions,
        rowData: tableData[i],
        includeVerticalScrollbar,
        ...passthroughProps
    });
}));

奇怪的是,当我逐步执行代码时,似乎正在分配密钥,但随后我在浏览器中收到一条警告,该警告Each child in an array or iterator should have a unique "key" prop可追溯到堆栈跟踪中的此处

有任何想法吗?

2个回答

克服这个问题的一种方法是用每个克隆元素包装React.Fragment并在后者上设置键。

像这样:

  <>
    {connections.map(connection => (
      <React.Fragment key={connection.id}>
        {React.cloneElement(element, connection)}
      </React.Fragment>
    ))}
  </>

来自文档React.cloneElement

与 React.addons.cloneWithProps 不同,原始元素的 key 和 ref 将被保留。

因此,如果您为 Cell 设置密钥,那么每个克隆都会自动获取密钥。