如何等待函数式组件加载以读取锚点ID实现正确导航

问题核心 #

懒加载的ImportedComponent在Tab3首次渲染时尚未完成挂载，导致useEffect执行时DOM中还没有目标锚点元素，只有后续渲染才能找到。用setTimeout属于临时 workaround，可靠性差；放弃懒加载又不符合需求。

可行解决方案 #

方案一：子组件挂载后通知父组件执行导航 #

让懒加载的子组件在自身挂载完成后，主动通知父组件触发锚点导航逻辑，确保锚点元素已存在于DOM中。

修改后的代码：

const Tab3 = () => {
  const handleAnchorReady = () => {
    linkToComponentSection(anchor);
  };

  return (
    <ImportedComponent onAnchorReady={handleAnchorReady} />
  )
}

const ImportedComponent = ({ onAnchorReady }) => {
  useEffect(() => {
    // 子组件挂载完成后调用父组件传递的回调
    onAnchorReady();
  }, [onAnchorReady]);

  return (
    <>
      <Title />
      <a id={anchorLinkForTab3} />
    </>
  )
}

方案二：在导航函数中增加元素存在性检查与重试 #

优化linkToComponentSection函数，通过requestAnimationFrame循环尝试获取目标锚点，直到元素存在再执行滚动操作，比setTimeout更贴合浏览器渲染周期，可靠性更高。

修改后的导航函数：

const linkToComponentSection = (anchorId) => {
  const attemptScroll = () => {
    const targetElement = document.getElementById(anchorId);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else {
      // 在下一渲染周期重试
      requestAnimationFrame(attemptScroll);
    }
  };
  attemptScroll();
}

原Tab3组件的useEffect无需修改，保持原有逻辑即可。

方案三：通过Ref监听子组件挂载状态 #

给ImportedComponent传递ref，父组件监听ref的变化，当ref指向有效DOM节点时执行导航。

代码示例：

const Tab3 = () => {
  const componentRef = useRef(null);

  useEffect(() => {
    if (componentRef.current) {
      linkToComponentSection(anchor);
    }
  }, [anchor, componentRef.current]);

  return (
    <ImportedComponent ref={componentRef} />
  )
}

// 使用forwardRef让子组件接收父组件传递的ref
const ImportedComponent = React.forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <Title />
      <a id={anchorLinkForTab3} />
    </div>
  )
})

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