Javascript 销毁克隆的元素后缺少Reactjs ref

在卸载克隆的父元素时，保留嵌套原始元素的ref有问题。不知道我做错了什么

有这样结构的页面

<Sortable>
   <Collapsible ref='Collapsible-1'>...</Collapsible>
   <Collapsible ref='Collapsible-2'>...</Collapsible>
</Sortable>

...
...

可排序组件将每个子项包装到可排序的\uuu项组件

当用户开始排序（拖动）一个可排序的项目组件时，我会做出反应。cloneElement（）原始可排序的项目将其显示为可拖动的阴影

它与所有子级一起被克隆，在这个场景中，可折叠组件的页面上保存了ref['collapsable-1']。页面上的那个ref被更改为这个shadows ref

一旦touchEnd启动，我将更新Sortable的状态以不显示阴影（它将被卸载）

当它被卸载时，它也会删除页面内的ref（更改为null）

问题：页面并没有对原始可折叠文件的引用，因为它首先被更改为shadow，然后shadow被卸载，所以现在它为null

快速破解/修复来解决这个恼人的问题。这样，如果引用已经存在，则不会更新它们。这很糟糕，但我不知道还有什么办法可以防止。谁能给我指出正确的方向

let registerRef = function(name, item){
    if(this.items[name]) return;
    this.items[name] = item;
}
<Sortable>
    <Collapsible ref={registerRef.bind(this,'Collapsible-1')}>...</Collapsible>
    <Collapsible ref={registerRef.bind(this,'Collapsible-2')}>...</Collapsible>
</Sortable>

let registerRef=函数（名称、项）{
如果（此项[名称]）返回；
此.items[名称]=项；
}
...
...

我重新思考了我的解决方案，并改变了它的工作方式

复制整个子系统并在其中包含所有组件的想法，只是将其显示为可拖动的阴影，这是个坏主意！这是一项性能繁重的任务，而且会导致reactjs REF出现意外结果

我选择了其他解决方案。当我开始排序（拖动）子对象时，我允许用户将其从列表中取出并移动它（我的意思是我应用display:absolute；以及一些css转换来跟随finger）。然后，我在列表中创建一个类似于dropbox的div，以指示可拖动项将被放置在onTouchEnd的何处。这种方法的性能要好得多，因为我没有复制整个项目DOM树，也不会导致子项引用的复制问题

---

已解决。

能否将{ref:null}作为传递给cloneElement的道具的一部分传递给cloneElement？这样，克隆将不包括您的ref函数。是的，我在克隆时已传递了新的ref，但我正在克隆可排序的__项，该项中包含已在顶级父项中引用的子项。ref被覆盖到克隆元素，但其子元素仍链接回页面。我认为要替换子ref，您需要调用React.children.map和cloneElement来替换子元素。谢谢TomW的帮助！