Javascript 反应cloneElement未设置键

Javascript 反应cloneElement未设置键,javascript,reactjs,Javascript,Reactjs,我正在构建一个动态生成键的表控件(我知道这可能不是一个好主意-我认为键应该与它所表示的数据唯一关联,否则可能只会为我们生成唯一的ID?),但无论哪种方式,似乎都没有设置键,我不知道为什么。表中的行是使用可以找到的函数生成的。基本上,我有一个可选择的组件来转换所有子元素-下面是其中一个转换函数(来自表体组件): 奇怪的是,当我一步一步地浏览代码时,似乎正在分配密钥,但随后我在浏览器中得到一条警告,数组或迭代器中的每个子级都应该有一个唯一的“key”prop,可以追溯到堆栈跟踪中 有什么想法吗?来自

我正在构建一个动态生成键的表控件(我知道这可能不是一个好主意-我认为键应该与它所表示的数据唯一关联,否则可能只会为我们生成唯一的ID?),但无论哪种方式,似乎都没有设置键,我不知道为什么。表中的行是使用可以找到的函数生成的。基本上,我有一个可选择的组件来转换所有子元素-下面是其中一个转换函数(来自
表体
组件):

奇怪的是,当我一步一步地浏览代码时,似乎正在分配密钥,但随后我在浏览器
中得到一条警告,数组或迭代器中的每个子级都应该有一个唯一的“key”prop
,可以追溯到堆栈跟踪中

有什么想法吗?

来自文档

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


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

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

像这样:

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


{connections.map(连接=>(
{React.cloneElement(元素,连接)}
))}

我认为,首先应该为Cell元素设置key,在这里引发错误{!children&&columnDefinitions.map((item,key)=>{return()})@Janom-这应该作为
子元素
道具传递给
FlexableElement
,其中还提供了一个生成子键的转换函数,这似乎是一种合理的方法,因此我将对其进行升级,尽管最近没有做太多“React.addons.cloneWithProps已弃用,因为React 0.13.0已弃用,请使用React.cloneElement代替React Lintreact/无弃用”:D
  <>
    {connections.map(connection => (
      <React.Fragment key={connection.id}>
        {React.cloneElement(element, connection)}
      </React.Fragment>
    ))}
  </>