如何防止React在组件被重新渲染时重置滚动位置?

Question

下面的例子有点做作，但它说明了这一点。而不是使用数据网格的内置列过滤器(即弹出，出现当你点击"Columns"按钮)，我使用的是自定义按钮。每当我滚动到这个自定义弹出窗口的底部，并选中/取消选中某些内容时，滚动条就会跳到弹出窗口的顶部。我怎样才能从一开始就防止这种情况的发生呢?或者有一种方法来恢复重新渲染后滚动条的位置?

代码沙箱

Answer 1

你的问题在这里:

components={{
Toolbar: GridToolbar,
ColumnsPanel: () => (
<ColumnFilter columns={columns} setColumns={setColumns} />
)
}}

每次columns更改时，将重新创建ColumnFilter。

解决方案是使用Data Grid的componentsPropprop将道具传递给组件，如下所示:

components={{
Toolbar: GridToolbar,
ColumnsPanel: ColumnFilter
}}
componentsProps={{
columnsPanel: {
columns,
setColumns
}
}}

查看这里的工作示例。