Reactjs 将react可排序hoc与react虚拟化'；s多重网格

我想和你一起使用。更具体地说，我希望能够对右下角网格中的行进行排序

第一次尝试 我正在使用

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

但是当这个挂载时，我得到一个错误，带有这个消息

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

错误源于错误

第二次尝试 我发现

SortableContainer

有一个

getContainer

属性，在抛出错误的代码上方调用该属性：

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

它是用多重网格组件实例调用的，但当我试图从中获取DOM节点时，它返回

null

：

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

我怀疑这可能是由于多重网格组件尚未安装造成的，我怀疑我看到的与此相关

第三次尝试-工作，但它是一个黑客 我想我可能可以通过首先返回不会抛出错误的内容来欺骗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: () => { }
      };
    }
  }}
/>

{
if（可排序网格）{
const multiGrid=sortableGrid.getWrappedInstance（）；
if（多重网格和多重网格。\u bottomRightGrid）{
const bottomRightGrid=多重网格。\u bottomRightGrid；
const bottomRightGridNode=ReactDOM.findDOMNode(
右下角网格
);
this.bottomRightGrid=bottomRightGridNode；
//哈克：我们不应该在组件上调用componentDidMount
sortableGrid.componentDidMount（）；
}
}
}}
getContainer={e=>{
if（此.bottomRightGrid）{
返回此.bottomRightGrid；
}否则{
//如果未知-返回不会抛出错误的内容
返回{
所有者文档：文档，
addEventListener:（）=>{}，
removeEventListener:（）=>{}
};
}
}}
/>

这似乎真的管用！但我仍然想知道，是否有人对如何更优雅地实现这一点有想法，或者两个LIB中的任何一个应该如何改变来解决这个问题

---

代码沙盒 我制作了两个沙盒来说明这一点：

第一个是一个功能性的可排序网格（我没有实现要持久化的最终状态）：。我实现了一个“rowRangeRenderer”来渲染单元格行（注意，滚动时它没有完全优化缓存），以替换defaultCellRangeRenderer，并允许由SortableElement包装行

尝试使用多重网格而不是网格-显示上述错误：

第三次尝试-它有点工作，但它是一个黑客

---

虽然已经3年了，但我最近有了相同的需求，发现这真的很有用，我使用

ReactDOM.findDOMNode（this）

作为容器，它可以工作

如果

MultiGrid

与Clauderic的可排序HOC一起工作，我会感到惊喜。“我从来没有试过。”布莱恩·沃恩对我来说，这似乎是个时间问题。

getContainer

是从

SortableContainer

的componentDidMount调用的，但由于某些原因，包装的组件（多重网格）尚未装入，findDOMNode返回null。我认为我对React和装入组件的顺序了解得不够，我不知道这两个库中的哪一个在这里做出了大胆的假设。应该在调用组件的

componentDidMount

方法时装入子组件，除非有条件呈现。在

MultiGrid

的情况下，如果还没有行/列，它会呈现

null

（）这可能是您看到的原因吗？