0

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

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

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

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

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

编辑:表当前包含 199 行。

4

2 回答 2

2

当滚动条介于两者之间并且组件被调整大小(通过增加高度)时,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

于 2019-05-26T10:02:41.333 回答
1

我认为没有必要仅仅为了让 DOM 刷新而改变状态。您可以通过为 RDG 的包装器 div 生成一个新密钥来实现。

<div key={Math.random()}>
  <ReactDataGrid
    columns={this.state.columns}
    rowGetter={this.rowGetter}
    rowsCount={this.state.rows.length}
    minHeight={height}
    onScroll={this.onScroll}
  />
</div>

尝试这个。

于 2019-05-27T05:00:43.050 回答