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

Question

我正在尝试使RDG Table可以在高度和宽度上进行扩展（对于扩展，我使用了ReactGridLayout）。我正在使用react-sizeme向组件（在我的情况下为height组件）中动态提供Width和Example。现在，当表格中的滚动条位于顶部时，表格的高度和宽度会正确扩展。 下图显示了顶部带有滚动条的表格： 如果我展开表格，一切将正常工作，如下图所示：

只要将滚动条放在中间，然后扩展表格的高度，行就会消失。只要我在表中滚动少量，就可以看到这些行。 例如在下图中，滚动条不在开头（可以看到第6行）。

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

我无法理解为什么滚动条不在开头时扩展时行会消失。

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

编辑：表当前包含199行。

Answer 1

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

因此，现在的问题减少到使RDG了解必须渲染新行。

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

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

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

Answer 2

我认为无需为了刷新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>

尝试一下。