使用自定义拖动预览使用React DnD时，如何隐藏元素？

Question

我正在使用React DnD来处理React应用程序中的拖放。我正在使用touch backend。在此实现中，我使用自定义拖动预览。在拖动时，我通过将其最大高度设置为0来隐藏“被拖动”的元素。自定义拖动预览显示为用户拖动。如果用户将元素放在不允许的区域中，则“被拖动”项将动画回原始高度。这很好。

当项目被删除时，我发送一个redux动作，重新排序项目列表并将之前拖动的元素放入其新位置。

但是，在DOM更新之前，拖动的项目会在当前位置闪烁，并在新位置为动画设置动画。

最大高度动画由isDragging为true时添加和删除的CSS类控制。

我已经搜索了React DnD文档和示例（通常非常彻底）并查看了其他一些使用过React DnD的开源项目，但似乎无法找到解决方案。我假设我错过了一些简单的东西，比如我可以通过的道具。从本质上讲，我希望isDragging保持true直到放弃操作完成，或者能够在可拖动目标或endDrag上的drop方法中更新道具在可投放目标上的功能。

我可以使用vanilla javascript来更新classList方法中的endDrag，但如果可能的话，我更愿意使用React工具。

有没有人遇到过这个问题？

Answer 1

通过修复在React中卸载DOM节点时Touch事件停止的已知问题，我能解决这个问题。

https://github.com/yahoo/react-dnd-touch-backend/issues/31

在此解决方案中，您创建了一个附加了触摸事件的DOM节点的副本，以便即使在拖动过程中添加和删除元素时React卸载该组件，它也会保留。