reactjs - 使用 react-sortable-hoc 和 react-virtualized 的 MultiGrid

Question

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

第一次尝试

我正在创建一个 SortableMultiGrid 使用

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

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

Cannot read property 'ownerDocument' of undefined

该错误源自 SortableContainer 's componentDidMount method .

第二次尝试

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

Optional function to return the scrollable container element. This property defaults to the SortableContainer element itself or (if useWindowAsScrollContainer is true) the window. Use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as FlexTable). This function is passed a single parameter (the wrappedInstance React element) and it is expected to return a DOM element.

它是用 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 有关。 .

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

我想我可以通过首先返回一些不会抛出错误的东西来欺骗 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

第三次尝试 - 它有点工作，但它是一个黑客 https://codesandbox.io/s/pprwo6m350

Answer 1

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