createPortal 必须在组件的 return 语句中调用，不能在事件处理函数内直接执行；需结合 React 状态（如 useState）控制其条件渲染，才能实现点击触发、动态挂载到 DOM 任意节点的效果。
`createportal` 必须在组件的 `return` 语句中调用，不能在事件处理函数内直接执行；需结合 react 状态（如 `usestate`）控制其条件渲染，才能实现点击触发、动态挂载到 dom 任意节点的效果。
在 React 中，createPortal 是将子节点渲染到当前组件 DOM 层级之外的指定容器（如 document.getElementById('xxx')）的关键 API。但一个常见误区是：试图在事件处理函数（如 handleClick）中直接调用 createPortal(...) 并期望它“立即生效”。这是无效的——因为 createPortal 本身不触发渲染，它只是一个渲染指令，必须被包含在组件的返回 JSX 树中，由 React 渲染器统一调度。
✅ 正确做法是：将 Portal 的显示逻辑与组件状态绑定，通过状态变化触发重新渲染，使 createPortal 在 return 中被求值并参与渲染流程。
以下是一个完整、可运行的示例：
import React, { useState, createPortal } from 'react';
const PortalExample = () => {
const [portalContent, setPortalContent] = useState<React.ReactNode>(null);
const handleClick = () => {
// 模拟业务条件判断
if (Math.random() > 0.3) {
setPortalContent(<h1 className="portal-heading">I'm a spawned heading</h1>);
} else {
setPortalContent(<p className="portal-text">Fallback content rendered via portal.</p>);
}
};
const handleClear = () => {
setPortalContent(null);
};
// ✅ 关键：createPortal 必须出现在 return 的 JSX 中
return (
<div>
<h2>Portal Trigger Zone</h2>
<button onClick={handleClick}>Spawn Content to #spawn-here</button>
<button onClick={handleClear} style={{ marginLeft: '8px' }}>
Clear Portal
</button>
{/* Portal 节点：仅当 portalContent 存在时才渲染 */}
{portalContent &&
createPortal(
portalContent,
document.getElementById('spawn-here') ?? document.body // 容错：避免 null 报错
)}
</div>
);
};
export default PortalExample;? 配套 HTML 结构（确保存在目标容器）：
<!-- 必须存在于 public/index.html 或主页面中 --> <div id="spawn-here" style="border: 2px dashed #666; padding: 16px; margin-top: 24px;"></div>
⚠️ 重要注意事项：
- DOM 节点必须提前存在：document.getElementById('spawn-here') 在组件首次渲染时即被调用，因此该 DOM 节点应在 React 应用挂载前就已存在（通常放在 index.html 的 <body> 内）。
- 避免空节点错误：建议添加空值校验（如 ?? document.body），防止因目标节点未就绪导致应用崩溃。
- 状态驱动，而非命令式调用：不要尝试在 useEffect 或事件中“手动插入”，这会绕过 React 的协调机制，造成状态不一致或内存泄漏。
- 性能友好：createPortal 本身无额外开销，其更新行为与普通 JSX 一致——依赖状态变更触发重渲染，完全符合 React 的声明式范式。
? 进阶提示：若需渲染更复杂内容（如带状态的子组件），可将 Portal 内容封装为独立组件，并通过 useState 管理其 props 或显式 key 控制重挂载，确保生命周期行为可控。
总之，createPortal 不是命令式 API，而是渲染表达式——它必须“活在 JSX 树里”，由状态驱动其出现与消失。理解这一点，就能写出清晰、可维护、符合 React 哲学的 Portal 逻辑。
