react封装弹窗

Index

import { message } from '@/utils/message'

const Index = () =>
{
    const btnClick = () =>
    {
        message('要展示的内容', (close) =>
        {
            console.log('点击了关闭按钮');
            close()
        })
    }
    return (
        <div>
            <h1 >Page index</h1>
            <button onClick={btnClick}>点击</button>
        </div>
    );
}

export default Index

message

import React, { Fragment } from 'react'
import { createRoot } from 'react-dom/client';
const contentStyle = {
    position: 'fixed',
    width: '100%',
    height: '100%',
    left: 0,
    top: 0,
    background: ' rgba(255, 255, 255, 0.8)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: '99'
};
const divStyle = {
    background: '#fff!',
    color: '#333',
    padding: '1em 2em',
    borderRadius: '10px',
    boxShadow: '0 0 3px #000',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
}
const textStyle = {
    marginBottom: '1em'
}
export function message (message, callBack)
{
    const app = document.createElement('div');
    app.id = 'model'
    document.body.appendChild(app);

    const close = () =>
    {
        app.remove() // 删除APP节点
        root.unmount() // 卸载root组件
    }

    const DOM = (
        <Fragment>
            <div style={contentStyle}>
                <div style={divStyle}>
                    <h1 style={textStyle}>
                        {message}
                    </h1>
                    <button onClick={() => { callBack && callBack(close) }}>确定</button>
                </div>
            </div>
        </Fragment>
    );
    const root = createRoot(app)
    root.render(DOM);
}