什么是 React Portal？它有什么用途？

React Portal 是 React 提供的一种机制，允许将子组件渲染到 DOM 树中不同于其父组件的位置（即在父组件层级之外）。即使这些子组件在 React 组件树中保留原有的父子关系，它们在 DOM 中的实际位置却可被灵活放置。

其主要用途包括：

1. 解决视觉层级限制问题
   当父组件的 CSS 样式（如 overflow: hidden, z-index, position: relative）限制了子组件的显示效果时，Portal 可让子节点“跳出”这些约束。典型的场景包括：
   • 模态框（Modal）：使模态层在全局视图中完整覆盖（不被父容器裁剪）；
   • 工具提示（Tooltip）：避免父元素布局导致提示框显示不全；
   • 悬浮菜单/通知框：独立渲染到页面的顶层区域。
2. 保留 React 上下文和事件机制
   子组件通过 Portal 渲染虽在 DOM 中位置不同，但仍位于 React 组件树中。因此：
   • 事件冒泡正常触发：在 Portal 内部的点击事件会向上冒泡至 React 组件的父节点；
   • Context 保持不变：能正常访问父级提供的 Context 等状态。

使用示例（代码实现）：

import { createPortal } from 'react-dom';

function Modal({ children }) {
  // 目标挂载节点（需在 HTML 中提前定义）
  const portalRoot = document.getElementById('portal-root'); 

  return createPortal(
    <div className="modal-overlay">{children}</div>,
    portalRoot
  );
}

// 在组件中使用：
function App() {
  return (
    <div>
      {/* 父组件 */}
      <Modal>
        <p>对话框内容（渲染在 #portal-root 节点）</p>
      </Modal>
    </div>
  );
}

注意事项：

• 必须提前在 HTML 中准备挂载容器（如 <div id="portal-root"></div>）。
• 需要手动管理 CSS 层叠（如 z-index）避免视觉覆盖混乱。
• 滥用可能增加组件结构的复杂度，建议仅当必要场景（模态框、全局弹窗等）才使用。