React 的插槽（Portals）主要运用场景是当子组件需要在视觉上突破父组件的 DOM 层次限制时，例如父组件设置了 overflow: hidden 或 z-index 样式，但子组件需要显示在父组件之外（如对话框、悬浮提示框等）。
Portals 的使用方法通过 ReactDOM.createPortal(child, container) 实现，其中：
- child：任何可渲染的 React 子元素（如元素、字符串、片段）。
- container：目标 DOM 节点，子元素将被渲染到该节点下。
具体应用示例：全局浮层1. HTML 结构<body> <div id="app-root"></div> <!-- 主应用挂载点 --> <div id="mask-root"></div> <!-- 浮层专用挂载点 --></body>2. CSS 样式#mask-root { position: relative; z-index: 999; /* 确保浮层在最上层 */}.modal { background-color: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; color: white;}3. React 组件实现const appRoot = document.getElementById('app-root');const maskRoot = document.getElementById('mask-root');// 浮层容器组件class Mask extends React.Component { constructor(props) { super(props); this.el = document.createElement('div'); // 动态创建 DOM 节点 } componentDidMount() { maskRoot.appendChild(this.el); // 挂载到 maskRoot } componentWillUnmount() { maskRoot.removeChild(this.el); // 卸载时清理 } render() { return ReactDOM.createPortal( this.props.children, // 渲染子内容 this.el // 到独立 DOM 节点 ); }}// 主应用组件class App extends React.Component { constructor(props) { super(props); this.state = { showMask: false }; this.toggleMask = this.toggleMask.bind(this); } toggleMask() { this.setState(prev => ({ showMask: !prev.showMask })); } render() { return ( <div style={{ overflow: 'hidden' }}> <button onClick={this.toggleMask}>显示浮层</button> {this.state.showMask && ( <Mask> <div className="modal"> <p>这是一个全局浮层</p> <button onClick={this.toggleMask}>关闭</button> </div> </Mask> )} </div> ); }}ReactDOM.render(<App />, appRoot);关键点说明突破 DOM 限制
即使父组件有 overflow: hidden，浮层仍可通过 Portals 渲染到 mask-root 下，避免被裁剪。
事件冒泡
Portals 渲染的内容仍在 React 树中，事件会按照 React 组件树冒泡（而非 DOM 树）。
动态 DOM 管理
通过 componentDidMount 和 componentWillUnmount 生命周期管理浮层节点的挂载/卸载。
典型场景
模态框（Modal）：需要覆盖整个视窗。
工具提示（Tooltip）：可能超出父容器边界。
通知栏（Toast）：全局显示，不受局部样式影响。
总结Portals 通过将子组件渲染到指定 DOM 节点，解决了 CSS 层级限制问题，适合需要视觉上“跳出”父容器的交互元素。结合动态 DOM 管理和 React 事件机制，能高效实现全局浮层等功能。
