0

当克隆的父级被卸载时，我在保持嵌套原始元素的引用时遇到问题。不知道我做错了什么。

有这样结构的页面

<Sortable>
   <Collapsible ref='Collapsible-1'>...</Collapsible>
   <Collapsible ref='Collapsible-2'>...</Collapsible>
</Sortable>
  1. Sortable 组件将每个子组件包装到 Sortable__item 组件
  2. 当用户开始对 Sortable__item 组件之一进行排序（拖动）时，我 React.cloneElement() original Sortable__item 将其显示为可拖动的阴影
  3. 它与所有子项一起克隆，在这种情况下，使用 Page 保存了 ref['Collapsible-1'] 的 Collapsible 组件。页面上的那个 ref 变成了这个 shadows ref。
  4. 一旦 touchEnd 启动，我会更新 Sortable 的状态以不显示阴影（它被卸载）。
  5. 当它被卸载时，它还会删除 Page 内的 ref（更改为 null）
  6. 问题：页面没有对原始可折叠的引用，因为首先它被更改为阴影，然后阴影被卸载，所以现在它为空

快速破解/修复来解决这个烦人的问题。这样，如果它们已经存在，则 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>
4

1 回答 1

0

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

用里面的所有组件复制整个孩子的想法，只是将其显示为可拖动的阴影，这是个坏主意！这是一项繁重的任务，而且它也会导致 reactjs refs 的意外结果。

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

解决了。

于 2016-03-06T18:10:36.650 回答