javascript - react cloneElement 不设置键

Question

我正在构建一个动态生成键的表控件(我理解这可能不是一个好主意——我认为键应该与它所代表的数据唯一关联，否则 React 只能为我们生成唯一的 ID？)，但无论哪种方式，似乎都没有设置 key ，我不知道为什么。表中的行是用可以找到的函数生成的 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
    });
}));

奇怪的是，当我单步执行代码时，似乎正在分配 key ，但随后我在浏览器中收到警告 数组或迭代器中的每个 child 都应该有一个唯一的“ key ” Prop 可追溯到 here在堆栈跟踪中。

有什么想法吗？

Answer 1

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

像这样:

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