DQ博客

切换主题

三、React.portal传送门 ​

如果想设置一个自定义遮罩，遮罩里面有其他组件，这个使用应该把遮罩“传送”到根节点，不然会出现poistion、overflow等等问题

这个时候，portal就出现了

使用

  1. 在index,html文件的body标签添加一个id为backdrop-root的div

    html
    <body>
  <div id="root"></div>
  <div id="backdrop-root"></div>
</body>

  2. 在自定义遮罩组件中，引入ReactDOM

    js
    import ReactDOM from "react-dom";

  3. 通过DOM操作获取id为backdrop-root的节点

    js
    const backdropRoot=documentElementById("backgrop-root")

  4. 包装return里的jsx元素

    js
    //创建传送门，并指定传送节点
return ReactDOM.createPortal(
	<div>待渲染的html代码</div>
,backdropRoot)