如何在react-indiana-drag-scroll中正确使用ref设置初始滚动位置

问题排查及修复方案 #

• 首先检查是否正确从react包中引入了useRef和useEffect两个Hook，漏引入会直接导致ref相关逻辑报错。
• 加非空判断避免container.current为null时报错：react-indiana-drag-scroll的ScrollContainer实例挂载时机可能比Effect触发晚，空依赖的Effect在组件挂载后立刻执行，有可能此时实例还没完全初始化。
• 如果ProjectData是异步请求获取的，空依赖的Effect执行时列表还没渲染，滚动容器的内容高度/宽度还没计算完成，此时调用scrollTo不会生效，需要把ProjectData加入Effect的依赖数组，等数据加载完成后再执行滚动逻辑。

修正后代码示例 #

import { useRef, useEffect } from 'react';
import ScrollContainer from 'react-indiana-drag-scroll';

export default function ProjectCarousel() {
  const container = useRef(null);

  useEffect(() => {
    // 先判断实例和getElement方法都存在再执行
    if (container.current?.getElement) {
      container.current.getElement().scrollTo(0, 240);
    }
  // 如果ProjectData是同步常量可移除该依赖
  }, [ProjectData]);

  return (
    <ScrollContainer className="scroll-container" ref={container}>
      {ProjectData.map(({ id, ...otherProps }) => (
        <ProjectImage key={id} {...otherProps} />
      ))}
    </ScrollContainer>
  );
}

如果以上修改还没解决，可以尝试给Effect加个短延迟兜底处理，避免组件内部渲染逻辑导致的时机偏差：

useEffect(() => {
  const timer = setTimeout(() => {
    if (container.current?.getElement) {
      container.current.getElement().scrollTo(0, 240);
    }
  }, 100);
  return () => clearTimeout(timer);
}, [ProjectData]);

内容的提问来源于stack exchange，提问作者DNH