React Portal 有哪些使用场景

最新推荐文章于 2025-03-18 13:33:35 发布

原创最新推荐文章于 2025-03-18 13:33:35 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

本文介绍如何使用 React 的 Portal 特性解决子组件受父组件样式影响的问题，通过实例演示如何将模态框独立挂载，避免 overflow 和 z-index 的限制。

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。比如，在某个场景下，父组件的 overflow: hidden或 z-index 属性被设置时，会影响子元素，假如我们不希望这样，这是我们就可以选用 Portal，让子元素跳出父元素的圈圈。常用的场景有：Modal 模态框、Popover 弹出 Drawer抽屉 等。

这样一来，我们现在组件的结构可以像这样：

<html>  <body>    <div id="app"></div>    <div id="modal"></div>    <div id="gotop"></div>    <div id="alert"></div>  </body></html>

编写组件代码，保证模态框被单例挂载到 id=modal 的节点上

const modalRoot = document.getElementById('modal');

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}

如此一来，Modal 组件的挂载节点就不用跟随父节点了，Portal 允许我们根据需求任意地挂载节点。