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} />);
};