React Virtualized InfiniteLoader/Grid:如何防止卷轴重置？

React Virtualized是一个用于构建高性能虚拟化列表和表格的React组件库。InfiniteLoader和Grid是React Virtualized中的两个组件，用于实现无限滚动加载和网格布局。

在React Virtualized InfiniteLoader/Grid中，防止卷轴重置的方法是通过使用onScroll事件和scrollTop属性来记录滚动位置，并在组件重新渲染时将滚动位置恢复到之前的位置。

具体步骤如下：

在父组件中定义一个状态变量scrollPosition来保存滚动位置。
在Grid组件上添加onScroll事件，将滚动位置更新到scrollPosition。
在Grid组件的scrollTop属性中传入scrollPosition，以保持滚动位置的恢复。

以下是一个示例代码：

import React, { useState } from 'react';
import { InfiniteLoader, Grid } from 'react-virtualized';

const MyComponent = () => {
  const [scrollPosition, setScrollPosition] = useState(0);

  const handleScroll = ({ scrollTop }) => {
    setScrollPosition(scrollTop);
  };

  return (
    <InfiniteLoader
      // 加载更多数据的逻辑
      // ...

      isRowLoaded={/* 判断行是否加载的函数 */}
      rowCount={/* 行数 */}
    >
      {({ onRowsRendered, registerChild }) => (
        <Grid
          ref={registerChild}
          onScroll={handleScroll}
          scrollTop={scrollPosition}
          // 其他Grid属性
          // ...
        />
      )}
    </InfiniteLoader>
  );
};

export default MyComponent;

这样，无论是组件重新渲染还是加载更多数据后重新渲染，都能保持滚动位置不变，避免卷轴重置。

推荐的腾讯云相关产品：腾讯云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库（TencentDB）等。你可以在腾讯云官网上找到这些产品的详细介绍和文档。

腾讯云官网链接：https://cloud.tencent.com/