React中不能直接通过Props传递组件实例挂载到任意DOM节点，但可通过Props传入可渲染内容（如children或组件类型），再结合ReactDOM.createPortal在指定节点渲染，这是符合React声明式原则的安全方案。
不能直接通过 Props 传递组件实例（如
用 Props 传入 children 或 render prop，再在 Portal 中渲染
这是最常用也最推荐的方式：父组件把要渲染的内容作为 children 或函数 props 传给子组件，子组件内部用 ReactDOM.createPortal 将其挂载到指定 DOM 节点。
- 父组件保持简洁，只负责“提供内容”，不关心挂载逻辑
- 子组件（如
ModalPortal、TooltipMounter）负责接收内容 + 指定容器（如document.body或某个ref节点）并调用 Portal - 示例：
<modalportal container="{modalRootRef}"><div classname="modal-content">Hello from Portal!</div> </modalportal>内部会执行createPortal(children, container.current)
用 Props 传入组件类型（Component）+ props，动态创建元素
如果你需要延迟决定渲染哪个组件，可以传入组件构造器（如 MyDialog）和它的 props 对象，在 Portal 组件内用 React.createElement 构建元素再挂载。
- 适合插件化、低耦合场景（比如弹窗系统支持任意业务组件）
- 注意：传入的 Component 必须是合法 React 组件（函数/类），且需确保其 props 类型安全
- 示例：
<portalrenderer component="{SettingsPanel}" componentprops="{{" onsave: handlesave container="{panelRootRef}"></portalrenderer>PortalRenderer 内部：const element = React.createElement(component, componentProps); return createPortal(element, container.current);
避免反模式：不要传实例、不要传已挂载的 DOM 节点
以下做法不符合 React 哲学，容易引发状态丢失、重复挂载、内存泄漏等问题：
- ❌ 把一个已渲染的组件实例（如
const inst =）当作 Props 传过去——这仍是 React Element，不是“实例”，且无法复用生命周期 - ❌ 传入 DOM 元素引用（如
document.getElementById('x')）让子组件手动appendChild——绕过 React 管理，失去协调（reconciliation）、事件绑定、Hooks 支持 - ✅ 正确路径始终是：内容 → React Element →
createPortal→ 由 React 控制渲染与更新
进阶：封装带上下文感知的 Portal 容器
当多个 Portal 需共享状态（如全局 z-index、焦点管理、关闭回调链），可配合 Context + 自定义 Hook 提升体验：
- 用
PortalContext提供register/deregister方法，自动管理挂载顺序 - 封装
usePortalHook，统一处理容器查找、fallback 创建（如自动document.createElement('div')并 appendTo body） - 支持服务端渲染（SSR）时降级为普通渲染（不调用 createPortal），避免 hydrate 错误
