React添加元素后滚动到新增元素的实现问题求助

问题根源 #

1. Recoil状态异步更新：子组件调用scrollTo时，Recoil的set操作还未完成，父组件的partIdList仍为旧值，导致传递的ListLength定位错误。
2. setTimeout不可靠：依赖固定延迟无法保证DOM已完成渲染，容易出现ref仍未绑定的情况。
3. Ref索引不匹配：用部件id作为数组索引，若id不是连续数字，会导致数组出现空槽或索引错位，触发undefined错误。

可行解决方案 #

1. 改用对象存储Ref，避免索引混乱

将存储ref的数组改为对象，用部件id作为键值对存储DOM元素，确保不管id格式如何，都能精准匹配对应的元素。

2. 父组件监听状态变化触发滚动

利用React的useEffect监听partIdList的变化，当数组新增元素时，自动获取最后一个部件的ref并执行滚动，确保DOM已完成渲染。

3. 移除不可靠的setTimeout

依赖React状态更新后的生命周期钩子触发滚动，无需手动设置延迟。

修改后的代码 #

父组件

import { useEffect, useRef } from 'react';

// ...

// 用对象存储每个部件的ref，键为部件id
const focusTarget = useRef<Record<string | number, HTMLElement>>({});

// 滚动到指定部件的函数
const scrollToPart = (id: number | string) => {
  const element = focusTarget.current[id];
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
  }
};

// 监听部件列表变化，新增时自动滚动到最后一个
useEffect(() => {
  if (partIdList.length > 0) {
    const lastPartId = partIdList[partIdList.length - 1];
    scrollToPart(lastPartId);
  }
}, [partIdList]);

return (
  <WriteContainer>
    <PartSectionContainer onScroll={scrollDetectHandler} id="section2">
      {partIdList.map((id, idx) => {
        return (
          <Part
            ref={(el) => {
              // 绑定/清理ref，避免内存泄漏
              if (el) focusTarget.current[id] = el;
              else delete focusTarget.current[id];
            }}
            partID={id}
            setVisibleMore={setVisibleMore}
            PartNum={idx}
            key={id}
          />
        );
      })}
    </PartSectionContainer>
  </WriteContainer>
);

子组件

移除原有的scrollTo调用，滚动逻辑交由父组件的useEffect处理：

const Part = forwardRef<any, IProps>(({ PartNum, setVisibleMore, partID }, ref) => {
 // ...
  const addPart = useRecoilCallback(({ snapshot, set }) => () => {
    const partIds = snapshot.getLoadable(sectionIdListAtom).getValue();
    const lastNumber = partIds[partIds.length - 1].slice(-1);
    set(sectionIdListAtom, [...partIds, PartIDFormat(Number(lastNumber) + 1)]);
    // 移除原scrollTo调用，交给父组件监听状态变化处理
  });

  return (
    <PartContainer ref={ref} id={PartIDFormat(PartNum + 1)}>
      ...
    </PartContainer>
  );
});

补充说明 #

• 如果需要手动触发滚动（非新增场景），可直接调用scrollToPart并传入目标部件id。
• 确保PartContainer是原生DOM元素（如div、section），若为自定义组件，需内部正确forwardRef到DOM节点。

内容的提问来源于stack exchange，提问作者김정수