React传送门实现弹框

src/Pages/DialogPage.js

import React,{useState} from 'react';
import Dialog from '../components/Dialog';

const DialogPage = () => {
    const [showDialog,setShowDialog] = useState(false)
    return (
        

            
DialogPage
             setShowDialog(!showDialog)}>toggle
            {
                showDialog && 

            }
        
    );
}

export default DialogPage;

src/components/Dialog.js

import React, { Component } from 'react'
//传送门
import {createPortal} from "react-dom";

export default class Dialog extends Component {
    //多包一层div
    constructor(props){
        super(props);
        const doc = window.document;
        this.node = doc.createElement("div");
        doc.body.appendChild(this.node);
    }
    componentWillUnmount(){
        window.document.body.removeChild(this.node);
    }
    render() {
        //把弹窗放在body下 传送门 传2个参数
        return createPortal(
            

                
Dialog
            
,this.node
        );
    }
}