portal

最新推荐文章于 2024-11-02 12:42:04 发布

晚东

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量127

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45239190/article/details/126824420

版权

protal 传送门

在index.html中添加一个新的元素
在组件中中通过ReactDOM.createPortal()将元素渲染到新建的元素中

在index.html中添加新元素：

<div id="backdrop"></div>

修改Backdrop组件： ReactDOM.createPortal

const backdropDOM = document.getElementById('backdrop');

const Backdrop = () => {
  return ReactDOM.createPortal(
  <div
           style={
      {
        position:'fixed',
        top:0,
        bottom:0,
        left:0,
        right:0,
        zIndex:9999,
        background:'rgba(0,0,0,.3)'
      }
    }
           >
  </div>,
      backdropDOM
  );
};

// 在ReactDOM.createPortal中 将<div> 传入到 backdropDOM中

如此一来，我们虽然是在Box中引入了Backdrop，但是由于在Backdrop中开启了“传送门”，Backdrop就会直接渲染到网页中id为backdrop的div中。