React中如何检测DOM元素存在并正确创建Portal？

核心问题本质 #

你遇到的问题是目标DOM元素的生命周期和Portal组件的生命周期不同步——Portal组件渲染时，目标元素可能还没完成挂载，或者后续元素被动态卸载，导致createPortal拿到无效的容器。

正确实现方案 #

1. 用useState+useEffect同步目标元素状态 #

把DOM元素的获取逻辑放到useEffect里（组件挂载后执行），同时监听DOM变化处理元素动态增减的情况，确保状态和真实DOM同步：

import { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';

function PortalButton() {
  const [targetElem, setTargetElem] = useState(null);

  useEffect(() => {
    // 首次挂载后获取目标元素
    const getTargetElem = () => document.getElementById('buttons');
    setTargetElem(getTargetElem());

    // 监听DOM变化，处理目标元素被动态添加/移除的场景
    const observer = new MutationObserver(() => {
      setTargetElem(getTargetElem());
    });
    observer.observe(document.body, { childList: true, subtree: true });

    // 组件卸载时清理监听，避免内存泄漏
    return () => observer.disconnect();
  }, []);

  // 仅当目标元素存在时渲染Portal
  return targetElem ? createPortal(<button>test</button>, targetElem) : null;
}

2. 确保目标元素先于Portal挂载 #

如果目标元素所在组件和Portal组件是同级/父级关系，要保证目标元素的组件先完成挂载：

• 路由场景下：确保包含#buttons的页面先渲染，再加载Portal组件
• 同一页面内：把Portal组件放在目标元素组件的子级，或者用条件渲染控制两者的加载顺序

3. 禁止在渲染阶段直接获取DOM #

不要在组件return前的渲染逻辑里调用document.getElementById——渲染阶段DOM还未完成更新，此时拿到的元素大概率是null或旧的DOM节点，所有DOM操作都要放到useEffect（挂载后异步执行）或useLayoutEffect（DOM更新前同步执行）中。

为什么你之前的方法无效？ #

• 直接在渲染阶段判断!!elem：第一次渲染时元素未挂载，Portal不渲染；但目标元素挂载后，Portal组件不会自动触发重渲染，必须等父组件更新或其他状态变化才会显示
• 错误使用useState+useEffect：可能是没在useEffect里正确更新状态，或者没处理元素动态变化的情况，导致状态更新不及时，仍然传递null给createPortal

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