销毁克隆元素

Question

我有问题，在克隆父级被卸载时保留嵌套原始元素的引用。不确定我做错了什么。

有这样结构的页面

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

1. 可排序组件将每个子项包装为Sortable__item组件
2. 当用户开始排序（拖动）Sortable__item组件之一时，我将React.cloneElement（）原始Sortable__item显示为可拖动阴影
3. 在所有子项中克隆它，在这种情况下使用可折叠组件，其中Page已保存参考[＆＃39; Collapsible-1＆＃39;]。页面上的引用变为此阴影参考。
4. 一旦touchEnd开始，我就会更新Sortable的状态，以便不显示阴影（它会被卸载）。
5. 当它被卸载时，它也会删除页面内的ref（更改为null）
6. 问题：页面没有引用原始的Collapsible，因为它首先被更改为阴影，然后阴影已卸载，所以现在它为null

快速破解/修复以解决这个恼人的问题。这种方式如果已经存在则refs永远不会更新。这很糟糕，但我不知道如何防止这种情况。有人能指出我正确的方向吗？

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>

Answer 1

我重新考虑了我的解决方案，并改变了它的工作原理。

想要复制整个孩子的内部所有组件，只是为了将其显示为可拖动的阴影，这是个坏主意！这是一项非常重要的任务，它也会对reactjs refs产生意想不到的结果。

我选择了其他解决方案。当我开始排序（拖动）孩子时，我允许用户从列表中取出并移动它（我的意思是我应用display：absolute;以及一些css转换为跟随手指）。然后我在列表中创建div，就像一个dropbox，以指示在onTouchEnd上可拖动项目的位置。这种方式对于性能要好得多，因为我没有复制整个项目DOM树，并且它不会导致子项重复的问题。

解决。