React封装静态方法打开Modal弹窗

组件代码：

import React, { useState } from 'react';
import { Modal } from 'antd';
import { render } from 'rc-util/lib/React/render';

/** 关闭静态方法弹窗 */
export const closeModal = (wrapKey: string) => {
    const div = document.getElementById(wrapKey);
    if (div) document.body.removeChild(div);
}

type ModalProps = {
    wrapKey: string;
    content: React.ReactNode;
    title?: string;
    onOk: (setOpen?: (open: boolean) => void) => void;
    onCancel?: () => void;
}

/** 静态方法弹窗组件 */
const ModalFunction = (props: ModalProps) => {
    // 是否打开弹窗
    const [open, setOpen] = useState(true);

    // 点击确认
    const handleOk = () => {
        props.onOk(setOpen)
    }

    // 点击取消
    const handleCancel = () => {
        setOpen(false);
        props.onCancel?.();
        setTimeout(() => {
            closeModal(props.wrapKey);
        }, 300);
    }

    return <Modal
        key={props.wrapKey}
        open={open}
        title={props.title}
        onOk={handleOk}
        onCancel={handleCancel}
        getContainer={() => document.getElementById(props.wrapKey) as HTMLElement}
    >
        {props.content}
    </Modal>
}

export default ModalFunction;

/** 打开静态方法弹窗 */
export const openModal = (props: ModalProps) => {
    const div = document.createElement('div');
    div.id = props.wrapKey;
    document.body.appendChild(div);
    render(<ModalFunction {...props} />, div);
}

调用：

import React, { useEffect } from 'react';
import type { FormInstance } from 'antd';
import { Form, Input } from 'antd';
import { openModal } from '@/components/modal-function';

type PropsType = {
    getForm: (form: FormInstance<any>) => void;
}

/** 申请表单 */
const ApplyForm = (props: PropsType) => {
    // form实例
    const [form] = Form.useForm();

    useEffect(() => {
        props.getForm(form);
    }, [form, props]);

    return <Form form={form}>
        <Form.Item
            label="申请理由"
            name="applyReason"
            rules={[
                { required: true, message: '请输入申请理由' }
            ]}
        >
            <Input.TextArea placeholder="请输入" />
        </Form.Item>
    </Form>
}

/** 打开申请表单 */
export const openConfigPermissionApplyForm = () => {
    let form: FormInstance<any> | null = null;
    openModal({
        title: '申请',
        wrapKey: 'applyModal',
        content: <ApplyForm getForm={formRef => { form = formRef }} />,
        onOk: () => {
            form?.validateFields().then(values => {
                console.log('values', values);
            })
        },
    })
}