React createPortal() 使用场景

最新推荐文章于 2024-02-29 11:03:53 发布

不知何未

最新推荐文章于 2024-02-29 11:03:53 发布

阅读量6.9k

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/weixin_44217613/article/details/121933451

版权

React 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

ReactDOM.createPortal(child, container)

Portal 将提供一种将子节点渲染到 DOM 节点中的方式，该节点存在于 DOM 组件的层次结构之外。
因此 Portals 适合脱离文档流(out of flow) 的组件，特别是 position: absolute 与 position: fixed的组件。比如模态框，通知，警告，goTop 等

<html>
  <body>
    <div id="root"></div>
    <div id="modal"></div>
  </body>
</html>

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,
    );
  }
}

优惠劵

不知何未

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React createPortal() 使用场景

ReactDOM.createPortal(child, container)Portal 将提供一种将子节点渲染到 DOM 节点中的方式，该节点存在于 DOM 组件的层次结构之外。因此 Portals 适合脱离文档流(out of flow) 的组件，特别是 position: absolute 与 position: fixed的组件。比如模态框，通知，警告，goTop 等<html> <body> <div id="root"></di
复制链接

扫一扫