react-beautiful-dnd 不能与 react-virtualized Table 组件一起正常工作

Question

预期行为

使用 DnD 动画从上到下拖动时，行应被拖动到其目标索引，反之亦然。

实际行为

从底部拖动到顶部索引时，行不会出现 DnD。从上到下拖动有效，但该项目是在最后一页索引之后添加的，而不是添加到目标索引中。 DnD 动画效果似乎也不太好。

重现步骤

您可以参考 this 沙箱来重现该问题。

案例 1：从上到下拖动

尝试从上到下拖动该行索引
您会看到该行被拖到页面的最后一个索引而不是目标索引

案例 2. 从下到上拖动

尝试将行从底部拖到顶部索引
您将观察到行没有被拖动并且没有调用 onDragEnd。

相同的代码适用于 react-virtualized 的列表组件，但不适用于 Table 组件。

您使用的 `React` 是什么版本？

16.13.0

你运行ning 是哪个 `react-beautiful-dnd` 版本？

13.0.0

你运行ning 是什么版本的 `react-virtualized`？

9.22.3

您使用的是什么浏览器？

Chrome

演示

我创建了这个沙箱来重现这个问题。您可以运行这个来检查问题。

https://codesandbox.io/s/vertical-list-forked-3lp71?file=/index.js

任何人都可以看看沙箱并帮助我吗？如果您需要其他信息，请告诉我！

编辑

所以今天，我调试了这个，并取得了一些进展。看起来问题出在 rowRenderer 实现上。在 defaultRowRenderer 的 dom 之上有一个额外的包装器 div。我能够部分解决这个问题。这是带有更新代码的新 sandbox link。

现在，还有一个问题是拖动行时滚动不起作用。任何指示我该如何解决这个问题？

Answer 1

终于解决了问题（不知道这样对不对）。解决方案是将 ref 作为反应虚拟化滚动包装器 div 而不是 react-virtualized 主包装器 div.

我已经用修复程序更新了上面的沙箱。

之前

ref={(ref) => {
                      
     if (ref) {
        // eslint-disable-next-line react/no-find-dom-node
        const whatHasMyLifeComeTo = ReactDOM.findDOMNode(ref);
        if (whatHasMyLifeComeTo instanceof HTMLElement) {
            provided.innerRef(whatHasMyLifeComeTo);
         }
      }
}}

之后（修复）

ref={(ref) => {
       if (ref) {
        const whatHasMyLifeComeTo = document.getElementsByClassName(
          "ReactVirtualized__Grid ReactVirtualized__Table__Grid"
        )[0];
        if (whatHasMyLifeComeTo instanceof HTMLElement) {
          provided.innerRef(whatHasMyLifeComeTo);
        }
      }
}}

react-beautiful-dnd 不能与 react-virtualized Table 组件一起正常工作

react-beautiful-dnd doesn’t work properly with react-virtualized Table component

javascript

reactjs

react-virtualized