时间戳

首页 > 解决方案 > React Data Grid 行在动态提供高度时消失

javascript - React Data Grid 行在动态提供高度时消失

问题描述

我正在尝试制作RDG Table可以ReactGridLayout在高度和宽度上扩展的（用于我使用的扩展）。我正在使用为我的组件（在我的案例组件中）react-sizeme动态提供height& 。现在，当表格中的滚动条位于顶部时，表格的高度和宽度会正确扩展。下图显示了顶部带有滚动条的表格： 如果我展开表格，一切都会正常工作，如下图所示： WidthExample顶部的滚动条在此处输入图像描述

一旦我们将 Scrollbar 放在中间，然后扩大表格的高度，行就会消失。只要我在表格中滚动少量，这些行就会变得可见。例如，在下图中，滚动条不在开头（第 6 行可见）。 滚动条不在开头

现在，如果我展开表格，一些行会消失，如下图所示： 行消失

当滚动条未开始时，我无法理解为什么行在扩展时会消失。

CodeSandbox 链接：https ://codesandbox.io/embed/rdg-optimising-scrolling-n6xpj

编辑：表当前包含 199 行。

标签： javascriptcssreactjsreact-data-gridreact-grid-layout

解决方案

当滚动条介于两者之间并且组件被调整大小（通过增加高度）时，RDG 将不知道它必须渲染新行来填充通过增加高度创建的空行。这就是为什么只要我手动滚动少量，RDG 就会知道它必须渲染新行并且一切都会正常工作。

所以，现在问题被简化为让 RDG 明白它必须渲染新行。

为此，我保持key: Math.random()状态并将此密钥作为道具传递给 RDG。在调整大小时，我正在检查新高度是否不等于以前的高度，如果是，则更新key将重新渲染整个 RDG 的状态。

我知道这不是有效的解决方案，但没关系，因为我最多有 200 行。

工作代码：https ://codesandbox.io/embed/rdg-optimising-scrolling-pgso9

编辑（24-08-2019）：上述代码将scroll position始终位于顶部，因为每次高度发生变化时我们都会创建全新的表格。所以，我尝试保持scroll position在同一个地方并得到更优化的代码。

首先，我删除key了，state因为它不再需要。然后，在 中scroll callback function，我保存了scrollTop在 中的位置state。

现在，一旦高度发生任何变化，需要做两件事：

1. Scroll to `zeroth` row.
2. Scroll to `scrollTop`.
Point 1 is required so that RDG can be made aware that their was change in height. 
This way it will render additional rows to fill entire table.

代码在这里：https ://codesandbox.io/s/rdg-optimising-scrolling-7lvdv

推荐阅读