javascript - 複製された要素を破棄した後に Reactjs ref が見つからない

Question

複製された親がアンマウントされる間、ネストされた元の要素の参照を保持するのに問題があります。私が間違っているのかわかりません。

このような構造のページを持っています

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

1. Sortable コンポーネントは、各子を Sortable__item コンポーネントにラップします
2. ユーザーが Sortable__item コンポーネントの 1 つをソート (ドラッグ) し始めると、元の Sortable__item を React.cloneElement() してドラッグ可能なシャドウとして表示します
3. このシナリオでは、Page が ref['Collapsible-1'] を保存した Collapsible コンポーネントを使用して、すべての子で複製されます。ページ上のその参照は、このシャドウ参照に変更されます。
4. touchEnd が起動したら、Sortable の状態を更新してシャドウを表示しないようにします (アンマウントされます)。
5. アンマウントされると、ページ内の参照も削除されます（nullに変更されます）
6. 問題: 最初に影に変更され、次に影がマウント解除されたため、ページには元の折りたたみ可能への参照がありません。

この厄介な問題を解決するためのクイックハック/修正. この方法では、参照が既に存在する場合、参照が更新されることはありません。これはかなり悪いですが、他にこれを防ぐ方法がわかりません。誰でも私を正しい方向に向けることができますか?

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>