銷毀克隆元素后，ReactJS ref丟失

Question

在卸載父級時，保持嵌套原始元素的引用存在問題。 不知道我在做什么錯。

具有這樣的結構頁面

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

1. Sortable組件將每個子級包裝到Sortable__item組件
2. 當用戶開始對Sortable__item組件之一進行排序（拖動）時，我將React.cloneElement（）原始Sortable__item顯示為可拖動陰影
3. 它會與所有子級一起克隆，在這種情況下，頁面已保存了ref ['Collapsible-1']的可折疊組件。 頁面上的該參考更改為該陰影參考。
4. 一旦touchEnd啟動，我將Sortable的狀態更新為不顯示陰影（將其卸載）。
5. 卸載后，它也會同時刪除Page內的ref（更改為null）
6. 問題：頁面沒有引用原始的可折疊對象，因為首先將其更改為陰影，然后卸載了陰影，因此現在其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>

Answer 1

我重新考慮了解決方案，並更改了其工作方式。

復制整個孩子的內部所有組件，只是將其顯示為可拖動的陰影，這是個壞主意！ 這是一項性能繁重的任務，而且還會導致reactjs引用產生意外結果。

我選擇了其他解決方案。 當我開始對子級進行排序（拖動）時，我允許用戶從列表中將其取出並移動（我的意思是我應用display：absolute；並且某些css變換跟隨手指）。 然后，我在列表內部創建一個像一個保管箱一樣的div，以指示可拖動項將在onTouchEnd上放置的位置。 這種方式在性能上要好得多，因為我不會復制整個項目DOM樹，並且不會引起子引用重復的問題。

解決了。