react笔记之学习之使用portal修改项目

前言

第一步index.html

<!--这个容器专门用来渲染遮罩层-->
<div id="backdrop-root"></div>

第二步

import React from 'react';
import './Backdrop.css';
import ReactDOM from "react-dom";

// 获取backdrop的根元素
const backdropRoot = document.getElementById('backdrop-root');

const Backdrop = (props) => {
    return ReactDOM.createPortal(<div className="backdrop">
        {props.children}
    </div>, backdropRoot);
};

export default Backdrop;