Reactjs ref在銷燬克隆元素後丟失

我有保留克隆父元素被卸載時嵌套原始元素的引用的問題。不知道我做錯了什麼。Reactjs ref在銷燬克隆元素後丟失

有頁面結構類似這樣的

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

可排序組件包裝每個孩子Sortable__item組件
當用戶開始排序（拖）Sortable__item部件之一，我React.cloneElement（）原Sortable__item到將其顯示爲可拖動的陰影
在此情況下，它會與所有兒童一起克隆，其中頁面已保存ref ['Collapsible-1']的Collapsible組件。頁面上的ref被改變爲這個陰影ref。
一旦touchEnd踢我更新狀態的Sortable不顯示陰影（它被卸載）。
當它到達卸載它還會刪除內頁REF（改變爲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>

來源

2016-03-05 Oozhaa

作爲傳遞給cloneElement的道具的一部分，你可以傳遞{ref：null}嗎？這樣克隆就不會包含你的ref函數。 – TomW

是的，我在克隆時已經通過了新的參考，但是我克隆了Sortable__item，裏面有已經在頂級父級中引用的子級。 ref會覆蓋克隆的元素，但其子元素仍然會鏈接回頁面。 – Oozhaa

我想替換孩子參考，你需要調用React.Children.map和cloneElement孩子。 – TomW

我重新考慮了我的解決方案，並改變了它的工作原理。

想法複製整個孩子與內部的所有組件，只是爲了顯示它可拖動陰影，是壞主意！這是性能繁重的任務，也會導致reactjs refs意外的結果。

我選擇了其他解決方案。當我開始排序（拖動）孩子時，我允許用戶從列表中移出並移動它（我的意思是我應用display：absolute;並且一些css轉換爲follow finger）。然後，我在列表中創建一個div，就像一個Dropbox，以指示可拖動的項目將在onTouchEnd上被拋棄的位置。這種方式對性能要好得多，因爲我沒有複製整個項目的DOM樹，也不會導致重複兒童引用的問題。

已解決。

來源

2016-03-06 18:10:36 Oozhaa

Reactjs ref在銷燬克隆元素後丟失

回答

相關問題