第一次尝试

Question

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

第一次尝试

我正在使用

创建一个SortableMultiGrid

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

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

无法读取未定义的属性'ownerDocument'

错误源自SortableContainer's componentDidMount method。

第二次尝试

我发现SortableContainer有getContainer属性，在抛出错误的代码上面调用：

返回可滚动容器元素的可选函数。此属性默认为SortableContainer元素本身或（如果useWindowAsScrollContainer为true）窗口。使用此函数指定自定义容器对象（例如，这对于与某些第三方组件（如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有关。

第3次尝试 - 工作，但这是一个黑客

我认为我可能通过首先返回一些不会引发错误的东西来欺骗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: () => { }
      };
    }
  }}
/>

这实际上似乎有效！但我仍然想知道是否有人有关于如何通过更优雅或两个库中的任何一个应该如何改变来解决这个问题的想法。

CodeSandbox

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

第一个是功能可排序的网格（我没有实现最终状态保持）：https://codesandbox.io/s/710kxo247x。我实现了一个“rowRangeRenderer”来渲染单元格行（注意它在滚动时没有完全优化缓存），以替换defaultCellRangeRenderer并允许行被SortableElement HOC包装。
尝试使用MultiGrid而不是网格 - 显示上述错误：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

使用react-sortable-hoc与react-virtualized的MultiGrid

第一次尝试

第二次尝试

第3次尝试 - 工作，但这是一个黑客

CodeSandbox

1 个答案: