【问题标题】：Using react-sortable-hoc with react-virtualized's MultiGrid使用 react-sortable-hoc 和 react-virtualized 的 MultiGrid
【发布时间】：2018-05-02 04:29:13
【问题描述】：

我想将react-sortable-hoc 与react-virtualized's MultiGrid 一起使用。更具体地说，我希望能够对右下方网格中的行进行排序。

第一次尝试

我正在创建一个 SortableMultiGrid 使用

const SortableMultiGrid = SortableContainer(MultiGrid, {
  withRef: true,
});

但是当这个安装时我得到一个错误，这个消息

无法读取未定义的属性“ownerDocument”

错误源自SortableContainer's componentDidMount method。

第二次尝试

我发现SortableContainer 有一个getContainer 属性，它在抛出错误的代码上方被调用：

返回可滚动容器元素的可选函数。此属性默认为 SortableContainer 元素本身或（如果 useWindowAsScrollContainer 为 true）窗口。使用此函数来指定自定义容器对象（例如，这对于与某些 3rd 方组件（例如 FlexTable）集成很有用）。这个函数被传递了一个参数（wrappedInstance React 元素），它应该返回一个 DOM 元素。

它是用 MultiGrid 组件实例调用的，但是当我尝试从中获取 DOM 节点时，它返回 null:

getContainer={e => {
  const multiGrid = ReactDOM.findDOMNode(e);
  // multiGrid is null - I must return an HTMLElement
}}

我怀疑这可能是由于尚未安装 MultiGrid 组件引起的，并且我怀疑我看到的内容与 https://github.com/clauderic/react-sortable-hoc/issues/135 有关。

第三次尝试 - 有效，但它是一个 hack

我认为我可以通过首先返回不会引发错误的内容来欺骗 SortableContainer，然后当可以确定对多网格内右下角网格的引用时，我可以再次调用 SortableContainer 的 componentDidMount。

<SortableMultiGrid
  // ...
  ref={sortableGrid => {
    if (sortableGrid) {
      const multiGrid = sortableGrid.getWrappedInstance();
      if (multiGrid && multiGrid._bottomRightGrid) {
        const bottomRightGrid = multiGrid._bottomRightGrid;
        const bottomRightGridNode = ReactDOM.findDOMNode(
          bottomRightGrid
        );
        this.bottomRightGrid = bottomRightGridNode;
        // HACK: We shouldn't ever call componentDidMount on components
        sortableGrid.componentDidMount();
      }
    }
  }}
  getContainer={e => {
    if (this.bottomRightGrid) {
      return this.bottomRightGrid;
    } else {
      // If its unknown - return something that wont throw errors
      return {
        ownerDocument: document,
        addEventListener: () => { },
        removeEventListener: () => { }
      };
    }
  }}
/>

这似乎确实有效！但是我仍然想知道是否有人对如何以更优雅的方式实现这一点或两个库中的任何一个应如何更改以解决此问题有想法。

代码沙盒

我制作了两个沙箱来说明这一点：

第一个是功能性可排序网格（我还没有实现要持久化的最终状态）：https://codesandbox.io/s/710kxo247x。我实现了一个渲染单元格行的“rowRangeRenderer”（注意它在滚动时没有完全优化缓存），以替换 defaultCellRangeRenderer 并允许由 SortableElement HOC 包装行。
尝试使用 MultiGrid 而不是 Grid - 显示上述错误：https://codesandbox.io/s/1z390ow44
第三次尝试 - 它有点工作，但它是一个 hack https://codesandbox.io/s/pprwo6m350

【问题讨论】：

如果MultiGrid 与 Clauderic 的可排序 HOC 合作，我会感到非常惊喜。我从未尝试过。
@brianvaughn 对我来说，这似乎是一个时间问题。 getContainer 是从 SortableContainer 的 componentDidMount 调用的 - 但由于某种原因，包装的组件（MultiGrid）尚未安装并且 findDOMNode 返回 null。我认为我对 React 的了解不够，并且组件的安装顺序了解这两个库中的哪一个在这里做出了大胆的假设。
子级应该在组件的componentDidMount 方法被调用时挂载，除非有一些条件渲染。在MultiGrid 的情况下，如果还没有行/列，它会呈现null (github.com/bvaughn/react-virtualized/blob/master/source/…) 这可能是您所看到的原因吗？

标签： reactjs react-virtualized react-sortable-hoc

【解决方案1】：

虽然已经 3 年了，但我最近有同样的要求，发现这真的很有帮助，我使用 ReactDOM.findDOMNode(this) 作为容器，它可以工作。 https://codesandbox.io/s/sortable-multigrid-hacked-forked-3mj8e?file=/MySortableMultiGrid.js

【讨论】：