如何在使用带有自定义拖动预览的 React DnD 放置时隐藏元素？
How can I hide an element while dropping using React DnD with a custom drag preview?
我正在使用 React DnD 来处理 React 应用程序中的拖放操作。我正在使用 touch backend。在此实现中，我使用自定义拖动预览。拖动时，我通过将其最大高度设置为 0 来隐藏 "being dragged" 元素。自定义拖动预览显示为用户拖动。如果用户将元素放在不允许的区域，则项目 "being dragged" 会动画回到其原始高度。这很好。
当项目被放下时，我发送了一个 redux 动作来重新排序项目列表并将之前拖动的元素放到它的新位置。
但是，在 DOM 更新项目并在其新位置设置动画之前，拖动的项目会在其当前位置闪烁。
最大高度动画由 CSS 类 控制，当 isDragging 为 true 时添加和删除。
我搜索了 React DnD 文档和示例（通常非常详尽）并查看了其他一些使用 React DnD 但似乎无法找到解决方案的开源项目。我假设我错过了一些简单的东西，比如我可以通过的道具。本质上，我希望 isDragging 保持 true 直到放下操作完成，或者能够在可拖动目标上的 endDrag 方法或 drop 中更新道具在可投放目标上运行。
我可以使用 vanilla javascript 来更新 endDrag 方法中的 classList，但如果可能的话我更愿意使用 React 工具。
有人遇到过这个问题吗？
我通过修复一个已知问题解决了这个问题，即在 React 中卸载 DOM 节点时触摸事件停止。
https://github.com/yahoo/react-dnd-touch-backend/issues/31
在此解决方案中，您创建了 DOM 节点的副本，该副本附加了触摸事件，这样即使 React 在拖动过程中添加和删除元素时卸载组件，它也会保留。
我正在使用 React DnD 来处理 React 应用程序中的拖放操作。我正在使用 touch backend。在此实现中，我使用自定义拖动预览。拖动时，我通过将其最大高度设置为 0 来隐藏 "being dragged" 元素。自定义拖动预览显示为用户拖动。如果用户将元素放在不允许的区域，则项目 "being dragged" 会动画回到其原始高度。这很好。
当项目被放下时，我发送了一个 redux 动作来重新排序项目列表并将之前拖动的元素放到它的新位置。
但是，在 DOM 更新项目并在其新位置设置动画之前，拖动的项目会在其当前位置闪烁。
最大高度动画由 CSS 类 控制，当 isDragging 为 true 时添加和删除。
我搜索了 React DnD 文档和示例（通常非常详尽）并查看了其他一些使用 React DnD 但似乎无法找到解决方案的开源项目。我假设我错过了一些简单的东西，比如我可以通过的道具。本质上，我希望 isDragging 保持 true 直到放下操作完成，或者能够在可拖动目标上的 endDrag 方法或 drop 中更新道具在可投放目标上运行。
我可以使用 vanilla javascript 来更新 endDrag 方法中的 classList，但如果可能的话我更愿意使用 React 工具。
有人遇到过这个问题吗？
我通过修复一个已知问题解决了这个问题，即在 React 中卸载 DOM 节点时触摸事件停止。
https://github.com/yahoo/react-dnd-touch-backend/issues/31
在此解决方案中，您创建了 DOM 节点的副本，该副本附加了触摸事件，这样即使 React 在拖动过程中添加和删除元素时卸载组件，它也会保留。