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 中预先创建目标容器元素
目录