Javascript 带有物料表的收割台闪烁和冻结问题（使用react窗口和react窗口无限加载程序实现）

我用react窗口（基于）和material UI实现了一个无限滚动表

该表似乎实现了主要目标，但没有什么问题-

尽管有适当的样式（

stickyHeader

prop），但页眉没有粘在顶部

标题在快速向上滚动时闪烁/闪烁。 [复制步骤-向下滚动50%，然后快速向上滚动并观察收割台移动]

---

下面是codesandbox示例-

使用

TableContainer

overflow-x

的默认值，粘性头应该可以工作

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles({
  tableContainer: {
    overflowX: "initial"
  }
})

function Inner({ children, ...rest }, ref) {
  const { header, footer, top } = useContext(VirtualTableContext)
  const classes = useStyles();
  return (
    <TableContainer classes={{root: classes.tableContainer}} {...rest} ref={ref}>
    ...

从“@material ui/core/styles”导入{makeStyles}
const useStyles=makeStyles({
桌面容器：{
溢出x：“初始”
}
})
函数内部（{children，…rest}，ref）{
const{header，footer，top}=useContext（VirtualTableContext）
const classes=useStyles（）；
返回(
...

---

作为实现的替代方案，有一个虚拟化表的工作示例，它实现了使用

react virtualized

所需的功能。也就是说，标题是粘性的，在滚动期间标题不会闪烁/闪烁

下面是一个代码沙盒 包含反映所需布局的工作示例

---

首先介绍

react窗口
：react窗口
中的scollbar是为
outercontainer
而不是为
InnerContainer
设置的。现在不要尝试替换外部容器本身，除非您想自己处理所有事情。所有的滚动事件都会附加一些其他内容
外部容器

将其视为外部容器决定/接受大小，较大的内部容器在其中滚动。

现在看一下您的案例，我假设您正在尝试使表的行为与任何其他网格一样，在这些网格中，标题是固定的，如果出现溢出，内容将被滚动。您的表标题在元素层次结构中比内部容器低得多，因此您无法编写任何简单的css（或js逻辑）来在当前层次结构中实现

这就是为什么即使您为
MaterialUI
表设置了
stickyheader
，它也不会粘住。因为您的整个表（
MaterialUI
表
）在
反应窗口的外部容器中滚动

我建议您将表格标题移到
react窗口的外部
，只将行放在
react窗口
中。这就是它的行为方式（即react窗口将其中的所有内容都视为可滚动内容）。请参阅下面的演示文稿之一：


关于重新设计
表
的一点提示（猜测通过添加css可以改进对齐方式）

页眉在顶部，但它（和其他所有内容）在顶部当我快速向上滚动时仍在闪烁。是的…它在快速向上滚动时仍在闪烁。react-window是react-virtualized的完全重写，它比react-virtualized轻得多，速度也快得多。这里的主要问题是由于无限加载程序，它会导致标题闪烁，因此更改库不会有任何不同。react窗口下的普通虚拟表中不会出现标题问题。@DevAKS是的，同意如果您使用react窗口下的普通虚拟表，则不会出现标题问题。事实上，有这样一种解决方案。鉴于react窗口无限加载程序的全部功能在您的解决方案（即，您不模拟远程数据的加载），为什么您需要包含react window infinite loader的解决方案？闪烁是一种功能，而不是一个bug……发生的情况是，
react window infinite loader
仅显示视口中当前可见的数据，以加快加载时间。当您向上滚动时，会加载新数据，并删除旧数据，但如果你滚动得很快，它跟不上。看看
.MuiTableBody root
@EliezerBerlin里面发生了什么，你说的是对的，TBody部分有很多add-delete，所以闪烁很好，但是header部分没有变化，所以它应该是冻结的，对吗？同样，它来自
react window infinite loader
。该表使用position:absolute和
top
移动。闪烁的真正原因是
表上的
top
属性。MuiTable root
的速度不够快，无法跟上您的滚动。尽管您可能还希望将css:
表布局：fixed；
添加到表中，以便标题的宽度不是由当前可见内容的宽度决定的。尝试了
表格布局：修复；
，没有发现任何差异。感谢您的详细解释。我们不能将
反应窗口
仅放在行上，因为这违反了材质UI规则，您不能在表体中添加额外的div。此外，我尝试了建议的更改，它不工作并且正在发出警告（
警告：validateDOMNesting（…）：不能显示为的子项。
）@DevAKS，所以您只关心MaterialUI not react窗口的规则。您从错误的层次结构级别退出Material UI表。您可以根据需要设计组件。其思想是，不要将标题视为html表格标题（th），将其视为普通标题（div集合）。这也是导致错误的原因，即表标题位于表之外。请将其置于react窗口之外。我想表页脚也会有同样的问题。更准确地说，只有表体应该位于react窗口之内。@DevAKS顺便说一句，我也很想知道