在React的map方法中使用useRef实现滚动到指定div的问题

你当前的问题根源在于单个useRef在map循环中会被重复覆盖，最后只会保留最后一个元素的引用。要解决这个问题，需要用useRef存储一个包含所有元素引用的映射表，通过id关联对应的元素。

步骤1：初始化存储所有引用的useRef #

用useRef创建一个空对象，用来以消息id为key存储每个div的引用：

const filterRefs = useRef({});

步骤2：修改渲染目标div的代码 #

在map循环中，将每个div的ref存入filterRefs.current，key为message.data.id：

{allMessages?.map((message) => (
  <div 
    key={message.data.id}
    ref={el => filterRefs.current[message.data.id] = el}
  >
    <div>
      <p>{message.data.text}</p>
    </div>
  </div>
))}

步骤3：修改滚动触发函数 #

根据传入的id，从filterRefs.current中找到对应的元素引用，再执行滚动逻辑：

const scrollToRef = (ref) => {
  if (ref) {
    window.scrollTo({
      top: ref.offsetTop,
      behavior: 'smooth' // 可选：添加平滑滚动效果
    });
  }
};

const goToFilterData = (id) => {
  const targetRef = filterRefs.current[id];
  scrollToRef(targetRef);
};

补充说明 #

• 用ref={el => ...}的函数式ref，可以动态将每个元素的DOM节点存入filterRefs.current的对应id字段中
• 滚动时先判断ref是否存在，避免找不到元素时报错
• 可选添加behavior: 'smooth'实现平滑滚动，提升用户体验

内容的提问来源于stack exchange，提问作者Tejendra Singh Rajawat