React Portals 的使用场景

将组件渲染到父组件 DOM 层次之外的位置

问题

React Portals 有什么用？在什么场景下需要使用它？

解答

React Portals 提供了一种将子组件渲染到父组件 DOM 层次结构之外的机制。它主要解决以下场景的问题：

模态框和对话框

当需要在应用的根 DOM 结构之外显示模态框时，Portals 可以将内容渲染到指定位置，避免受父组件样式和布局的影响。

解决 z-index 层级问题

在复杂布局中，组件可能因为 z-index 层级关系无法正确显示。使用 Portals 可以将组件渲染到具有更高 z-index 的容器中。

固定定位组件

需要在页面固定位置显示的组件（如 Tooltip、下拉菜单），可以通过 Portals 渲染到 body 或其他容器中，不受父组件定位的限制。

基本用法

import React from 'react';
import ReactDOM from 'react-dom';

function MyPortalComponent({ children }) {
  return ReactDOM.createPortal(
    children,
    document.getElementById('portal-root')
  );
}

// 使用示例
function App() {
  return (
    <div>
      <h1>主应用</h1>
      <MyPortalComponent>
        <div className="modal">这是一个模态框</div>
      </MyPortalComponent>
    </div>
  );
}

在 HTML 中需要预先创建目标容器：

<body>
  <div id="root"></div>
  <div id="portal-root"></div>
</body>

关键点

Portal 将子组件渲染到指定的 DOM 节点，但在 React 组件树中仍保持父子关系
事件冒泡会按照 React 组件树传播，而不是 DOM 树
常用于模态框、弹出层、Tooltip 等需要脱离父容器的组件
需要在 HTML 中预先创建目标容器元素