如何在React中跨组件获取DOM元素并滚动到模态框底部？

首先你遇到的document.getElementById('scroll-indicator')返回null的核心原因是：调用scrollToBottom时，目标元素还没被React渲染到DOM中（React的DOM更新是异步的，比如模态框刚打开时，组件还处于挂载/更新流程中，DOM尚未完成更新）。

以下是几种无需多层传递ref的解决方法：

1. 确保在DOM更新完成后调用滚动 #

利用setTimeout把滚动逻辑放到下一次事件循环，或者配合useEffect监听触发滚动的条件（比如模态框的显示状态）：

function scrollToBottom() {
  // 等待DOM完成更新
  setTimeout(() => {
    const container = document.getElementById('scroll-indicator');
    if (container) {
      container.scrollIntoView({ behavior: 'smooth' });
    }
  }, 0);
}

// 如果是在Hook中，配合状态监听：
function useScrollLogic() {
  const [isModalVisible, setIsModalVisible] = useState(false);

  useEffect(() => {
    if (isModalVisible) {
      const timer = setTimeout(() => {
        const container = document.getElementById('scroll-indicator');
        container?.scrollIntoView({ behavior: 'smooth' });
      }, 0);
      return () => clearTimeout(timer);
    }
  }, [isModalVisible]);

  // ...其他逻辑
}

2. 用MutationObserver监听元素挂载 #

如果不确定元素何时会出现在DOM中，可以用MutationObserver监听整个DOM树，一旦目标元素出现就执行滚动：

function scrollToBottom() {
  const container = document.getElementById('scroll-indicator');
  if (container) {
    container.scrollIntoView({ behavior: 'smooth' });
    return;
  }

  // 创建观察者，监听DOM变化
  const observer = new MutationObserver(() => {
    const target = document.getElementById('scroll-indicator');
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' });
      observer.disconnect(); // 找到元素后停止监听
    }
  });

  // 监听body下所有子元素的变化（包括深层子组件）
  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
}

3. 共享状态标记元素挂载状态 #

如果你的Hook和AFormBody共享同一个自定义Hook（比如useAnnouncementForm），可以在共享Hook里加一个状态，标记目标元素是否已挂载：

首先更新useAnnouncementForm：

function useAnnouncementForm() {
  const [announcement, setAnnouncement] = useState({});
  const [isIndicatorMounted, setIsIndicatorMounted] = useState(false);

  // ...其他业务逻辑

  return {
    announcement,
    isIndicatorMounted,
    setIsIndicatorMounted
  };
}

然后在AFormBody中设置挂载状态：

function AFormBody() {
  const { announcement, setIsIndicatorMounted } = useAnnouncementForm();

  useEffect(() => {
    setIsIndicatorMounted(true);
    return () => setIsIndicatorMounted(false); // 组件卸载时重置
  }, []);

  return (
    <AnnouncementBody>
      <A/>
      <B/>
      <C/>
      <D/>
      <E/>
      <FComponent/>
      <div id="scroll-indicator" />
    </AnnouncementBody>
  );
}

最后在你的Hook中监听这个状态来触发滚动：

function useYourHook() {
  const { isIndicatorMounted } = useAnnouncementForm();

  useEffect(() => {
    if (isIndicatorMounted) {
      const container = document.getElementById('scroll-indicator');
      container?.scrollIntoView({ behavior: 'smooth' });
    }
  }, [isIndicatorMounted]);

  // ...其他逻辑
}

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