Reactjs 反应台的无限载荷+；反应虚拟化/反应窗口

我对我的表格有以下要求：

表应该有固定的标题

它需要自动调整大小：为了使无限滚动工作，第一次获取应该获得足够的数据量，以便滚动显示

表体应作为无限加载程序工作：当滚动到列表末尾时，表体应显示加载指示器并加载更多行

我的假设如下所示：

由于用户将滚动浏览可能较大的数据集，我应该虚拟化列表（react虚拟化似乎是我唯一的好选择）

因为我们目前有react表，所以我想保留它（它具有声明表行、列、访问数据和过滤+排序的强大机制）

当我们使用材质ui时，我需要使用材质ui组件

因为react虚拟化有自己的表组件，所以我可以使用它，但react表有不同的方式呈现行和列，所以我必须使用列表组件。（react表分隔行和列，而react虚拟化将列直接用作表组件的子级）

我看到react虚拟化与名为InfiniteLoader的HOC组件一起工作，所以我也应该使用它

最后，我需要我的列不被弄乱，因为它有更多的文本（即有动态高度）。所以我试着用CellMeasurer来做这个

在这个沙箱中可以看到我所取得的成就 （我不能在这里提供代码，因为它相当大）

所以，一般来说，我可以使Autosizer、CellMeasurer和react的列表组件虚拟化以工作。 我被困在有限的滚动部分。我在官方文档上看到了这个例子，但它似乎有点反模式（直接改变状态根本不是一件好事）

所以我尝试获得类似的结果，但是如果您可以看到，出于某种原因，我的loadMore函数启动得太早了。它导致几乎每个滚动事件都会发送请求

非常感谢您的帮助

我已经试过了：

使用react窗口而不是react虚拟化 它只适用于简单的用例，并且在单元的动态大小方面失败

使用react inifnite Scroll组件（） 它适用于整个页面（无法创建“粘性”标题，无法将加载指示器作为表体的一部分呈现，它没有对长列表进行任何优化）

使用react虚拟化的表组件。 我无法使它与react table一起工作（react virtualized的table组件似乎将单元格直接呈现为table组件的子级。我知道它具有renderRow功能，但这意味着react table具有两个独立的位置

{row.cells.map（（cell）=>{
返回(
{cell.render（“cell”）}
);
})}

此外，还不清楚如何以这种方式渲染自定义过滤器

<TableRow
  {...row.getRowProps({
     style
  })}
  component="div"
  >
  {row.cells.map((cell) => {
     return (
       <TableCell {...cell.getCellProps()} component="div">
         {cell.render("Cell")}
       </TableCell>
      );
   })}
</TableRow>