使用ReactDom.createportal 实现弹框

import React, { Children, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./c1.css";
const Modal = (props: any) => {  //第一次渲染dom 走生命周期  还会在渲染拿值
    console.log(props, 1114)
    const [target, setTarget] = useState(null);
    console.log(target, 1111, target)
    useEffect(() => {
        console.log(1, document.getElementById("modal-root"))
        setTarget(document.getElementById("modal-root") as any);
    }, []);


    useEffect(() => {
        console.log("show change", props.show);
    }, [props.show]);

    if (!props.show) return null;  //false 就返回null 

    const close = () => {
        console.log("modal close");
        props.onClose();
    };
    const children = (
        <div className="modal">
            modal <button onClick={close}>close</button>
        </div>
    );
    console.log("Modal", children, target);
    //target 一拿到dom 就会添加一个dom 到 target
    return target ? ReactDOM.createPortal(children, target as any) : <div>无父元素</div>;
};
const C = () => {
    const [show, setShow] = useState(false);
    const onClose = () => {
        console.log("C onClose");
        setShow(false);
    };
    return (
        <div>
            C,
            <Modal show={show} onClose={onClose}></Modal>
            <button onClick={() => setShow((i) => !i)}>change</button>
        </div>
    );
};
const A = (props: any) => {

    return (
        <>
            <div id="modal-root"></div>
            <div id="father">
                
            </div>
        </>
    );
};

export default A;