我正在尝试制作可以在高度和宽度上扩展的RDG Table（用于扩展我使用了ReactGridLayout）。我正在使用react-sizeme 为我的组件（在我的情况下为Example 组件）动态提供height 和Width。现在，当表格中的滚动条位于顶部时，表格的高度和宽度会正确扩展。
下图显示了顶部带有滚动条的表格：
如果我展开表格，一切都会正常工作，如下图所示：
只要我们将滚动条放在中间，然后扩大表格的高度，行就会消失。只要我在表格中滚动少量，这些行就会变得可见。 例如在下图中，滚动条不在开头（第 6 行可见）。
我无法理解为什么滚动条未开始时行在展开时会消失。
代码沙盒链接：https://codesandbox.io/embed/rdg-optimising-scrolling-n6xpj
编辑：表格目前包含 199 行。
【问题讨论】：
标签： javascript css reactjs react-data-grid react-grid-layout
当滚动条位于中间并且组件被调整大小（通过增加高度）时，RDG 将不知道它必须渲染新行来填充通过增加高度创建的空行。这就是为什么只要我手动滚动少量，RDG 就会知道它必须渲染新行并且一切都会正常工作。
所以，现在问题被简化为让 RDG 明白它必须渲染新行。
为此，我将key: Math.random() 保持在状态，并将此密钥作为道具传递给 RDG。
在调整大小时，我正在检查新高度是否不等于以前的高度，如果是，则更新 key 状态，这将重新渲染整个 RDG。
我知道这不是有效的解决方案，但没关系，因为我最多有 200 行。
工作代码：https://codesandbox.io/embed/rdg-optimising-scrolling-pgso9
编辑（2019 年 8 月 24 日）：
上面提到的代码将使scroll position 始终位于顶部，因为每次高度变化时我们都会创建全新的表。因此，我尝试将scroll position 保留在同一位置，并得到了更优化的代码。
首先，我从state 中删除了key，因为它不再需要。
然后，在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
【讨论】：
losing scroll position 不是问题。但是，这是一个很好的问题，我还没有探索过。如果我发现有用的东西会分享一些解决方案。
losing scroll position 问题并用解释和代码编辑了我的答案。
我认为没有必要仅仅为了刷新 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>
试试这个。
【讨论】：