弹窗的二次封装 （函数类型）

import type { ModalProps } from 'antd';

import ReactDOM from 'react-dom';

import { useState } from 'react';
import { Modal } from 'antd';
import { omit } from 'lodash';
import React from 'react';
const CONTAINER_ID = 'x-modal';

export type LAVAModeProps = ModalProps & {
    content: JSX.Element;
};

const ModalCom: React.FC<ModalProps> = (props) => {
    const { onOk, onCancel, width, children } = props;
    const modalProps = omit(props, [
        'onOk',
        'onCancel',
        'destroyOnClose',
        'children',
        'width',
    ]);
    const [open, setOpen] = useState<boolean>(true);
    const onHandle = (handle: ModalProps['onCancel'] | ModalProps['onCancel']) => {
        return (e: React.MouseEvent<HTMLElement>) => {
            if (handle) {
                handle(e);
            }
            setOpen(false);
            const container = document.getElementById(CONTAINER_ID);
            if (container) {
                ReactDOM.unmountComponentAtNode(container);
            }
        };
    };
    return (
        <Modal
            {...modalProps}
            destroyOnClose
            open={open}
            width={width}
            onOk={onHandle(onOk)}
            onCancel={onHandle(onCancel)}
            centered
        >
            {children}
        </Modal>
    );
};
// 外部调用函数
const openModal = (val: ModalProps, mountTarget?: HTMLElement) => {
    let div: HTMLElement | null = document.getElementById(CONTAINER_ID);
    if (!div) {
        div = document.createElement('div');
        div.setAttribute('id', CONTAINER_ID);
        if (mountTarget) {
            mountTarget.appendChild(div);
        } else {
            document.body.appendChild(div);
        }
    }
    ReactDOM.render(<ModalCom {...val} />, div);
};
export default openModal;

外部调用实例：

openModal 第二个参数 mountTarget：挂载的位置，不写 默认为body。

注意：react版本为18版本

// 外部调用函数
const openModal = (val: ModalProps, mountTarget?: HTMLElement) => {
    let div: HTMLElement | null = document.getElementById(CONTAINER_ID);
    if (!div) {
        div = document.createElement('div');
        div.setAttribute('id', CONTAINER_ID);
        if (mountTarget) {
            mountTarget.appendChild(div);
        } else {
            document.body.appendChild(div);
        }
    }
    const root = createRoot(div);
    root.render(<ModalCom {...val} />);
};