React 中正确使用 createPortal 的方法

因此，正确的实践是：用 React 状态（如 useState）控制 Portal 内容的显示/隐藏，并将 createPortal() 调用置于 return 语句内，作为条件渲染的一部分。 这既符合 React 的声明式范式，也保证了生命周期一致性与可预测性。

以下是一个完整、可运行的示例：

import React, { useState, createPortal } from 'react';

const MyComponent = () => {
  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(null); // 清除 Portal 内容
    }
  };

  return (
    <div>
      <p>这是主组件内的常规内容，不受 Portal 影响。</p>
      <button onClick={handleClick}>动态触发 Portal 渲染</button>

      {/* ✅ 正确用法：在 return 中条件渲染 createPortal */}
      {portalContent && 
        createPortal(
          portalContent,
          document.getElementById('spawn-here') ?? document.body // 容错：避免 null 报错
        )
      }
    </div>
  );
};

export default MyComponent;

? 关键注意事项：

• 目标容器必须存在且稳定：确保 #spawn-here 在 createPortal 执行时已挂载到 DOM（推荐在 useEffect 中预创建，或确保其位于 index.html 的 下且早于 React Root 渲染）；
• 避免重复创建容器节点：不要在 render 或 return 中动态 document.createElement 并传入 createPortal —— 这会导致每次渲染新建节点，破坏 Portal 的更新机制；
• Portal 内容仍受 React 生命周期约束：Portal 中的组件会正常响应 props 更新、触发 useEffect、参与 shouldComponentUpdate 等，但它脱离了父组件的 DOM 树位置；
• 服务端渲染（SSR）限制：createPortal 在 SSR 中无法工作（因无 document），务必配合 useEffect 或检查 typeof window !== 'undefined' 做降级处理；
• 类型安全提示：TypeScript 下建议显式声明 portalContent 类型为 React.ReactNode | null，避免 undefined 导致的潜在运行时错误。

✅ 总结：createPortal 不是命令式“插入工具”，而是声明式“渲染重定向机制”。它的调用位置必须在组件的渲染路径中（即 return 或自定义 Hook 的返回 JSX 中），并通过状态驱动来实现按需挂载。这种设计看似增加了一层抽象，实则保障了 React 整体渲染模型的一致性、可调试性与可组合性。

本篇关于《React 中正确使用 createPortal 的方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！