Question

我正在构建一个动态生成密钥的表控件（我理解这可能不是一个好主意 - 我想密钥应该与它所代表的数据唯一关联，否则React可能只为我们生成唯一的ID？），但无论哪种方式，似乎键没有设置，我不明白为什么。使用可以找到here的函数生成表中的行。基本上我有一个helper component，它使用一个可选组件来转换所有子元素 - 这里是其中一个转换函数（来自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中收到警告，该警告会追溯到堆栈跟踪中的here。

有什么想法吗？

Answer 1

来自文档React.cloneElement

的

与React.addons.cloneWithProps不同，key和ref来自原始版本元素将被保留。

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

Answer 2

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

像这样：

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

React cloneElement not setting key

2 个答案: