React 保持滚动位置问题解决

在 React 中保持滚动位置可以使用 refs 和 useState 配合使用。下面是一个解决React中保持滚动位置的示例：

import React, { useRef, useEffect, useState } from 'react';

const App = () => {
  const ref = useRef(null);
  const [scrollPos, setScrollPos] = useState(0);

  useEffect(() => {
    const node = ref.current;
    if (node) {
      node.scrollTop = scrollPos;
    }
  }, [scrollPos]);

  const handleScroll = () => {
    const node = ref.current;
    if (node) {
      setScrollPos(node.scrollTop);
    }
  };

  return (
    <div ref={ref} onScroll={handleScroll} style={{ height: '200px', overflow: 'scroll' }}>
      {/* 滚动内容 */}
    </div>
  );
};

export default App;

在这个示例中，我们创建了一个 ref，并使用 useState 来记录滚动位置。然后通过 useEffect 监听 scrollPos 的变化，并在滚动位置变化时，将这个位置设置到 ref 的 scrollTop 属性上。

在 <div> 标签上我们使用 ref={ref} 将 ref 和 DOM 元素关联起来，并在 onScroll 事件中调用 handleScroll 函数来监听滚动事件。在 handleScroll 函数中，我们获取 ref 对应的 DOM 元素，并将当前的滚动位置设置到 scrollPos。这样我们就实现了对滚动位置的监听和更新。

需要注意的是，在使用 useState 监听 scrollPos 变化时，要确保不会出现无限循环。可以使用 useEffect 的第二个参数来控制只在 scrollPos 发生变化时触发监听。在这个示例中，我们将 scrollPos 添加到 useEffect 的依赖数组中，这样只有 scrollPos 变化时才会执行 useEffect 里的代码。

通过以上的代码，你应该能够在 React 中保持滚动位置。