问题描述
我对我的表有以下要求:
- 表格应该有固定的标题
- 它需要自动调整大小:要使无限滚动工作,第一次获取应该获得足够的数据量才能完全显示滚动。
- 表格主体应该作为无限加载器工作:当滚动到列表表格主体的末尾时应该显示加载指示器并加载更多行
我的假设如下:
- 因为用户将滚动浏览可能的大量数据集,所以我应该虚拟化列表(反应虚拟化似乎是我唯一的好选择)
- 因为我们目前有 react-table 我想保留它(它有很好的机制来声明表格行、列、访问数据和过滤 + 排序)
- 当我们使用材料 ui 时,我需要使用材料 ui 反应组件
- 因为 react-virtualized 有自己的 Table 组件我可以使用它,但是 react-table 有不同的呈现行和列的方式,因此我必须使用 List 组件。 (react-table 分隔行和列,而 react-virtualized 直接使用列作为 Table 组件的子级)
- 我看到 react-virtualized 可以与名为 InfiniteLoader 的 HOC 组件配合使用,所以我也应该使用它
- 最后,我需要我的列不要因为它有更多文本(即具有动态高度)而被弄乱。因此,我尝试为此使用 CellMeasurer。
在这个沙箱中可以看到我能够实现的目标 https://codesandbox.io/s/react-table-infinite-mzkkp?file=/src/MuiTable.js (我无法在这里提供代码,因为它非常大)
所以,一般来说,我可以让 Autosizer、CellMeasurer 和 List 组件从 react-virtualized 工作。 我被困在无限滚动部分。我在官方文档上看到了例子,不过好像有点反模式(直接变异状态根本不是什么好事)
所以我试图达到类似的结果,但是如果你能看到,我的 loadMore 函数由于某种原因过早触发。这导致几乎每个滚动事件都会发送请求。
非常感谢任何帮助。
我已经尝试过的:
- 使用 react-window 而不是 react-virtualized 它仅适用于简单的用例,并且因单元格的动态大小而失败。
- 使用 react-inifnite-scrollcomponent (https://www.npmjs.com/package/react-infinite-scroll-component) 它适用于整个页面(无法制作“粘性”标题,无法将加载指示器呈现为表格正文的一部分,它没有对长列表进行任何优化)
- 使用来自 react-virtualized 的 Table 组件。 我无法使其与 react-table 一起使用(因为 react-virtualized 的 Table 组件似乎直接将 Cells 渲染为 Table 组件的子项。我知道它具有 renderRow 功能,但这意味着两个不同的地方,而 react-table 具有立>
<TableRow
{...row.getRowProps({
style
})}
component="div"
>
{row.cells.map((cell) => {
return (
<TableCell {...cell.getCellProps()} component="div">
{cell.render("Cell")}
</TableCell>
);
})}
</TableRow>
此外,尚不清楚如何以这种方式呈现自定义过滤器。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)