直接傳入API和原來Modal的children,而不傳入visible,讓Modal處理自己的資料
import React from `react`;
import ReactDOM from `react-dom`;
import { Modal } from `antd`;
export function newModal(options = {}, children) {
const destroy = (node) => {
ReactDOM.unmountComponentAtNode(node);
const unmountResult = ReactDOM.unmountComponentAtNode(node);
if (unmountResult && node.parentNode) { // ReactDOM.unmountComponentAtNode就可以刪除
node.parentNode.removeChild(node);
}
};
const modalHas = document.getElementsByClassName(`smart-modal`)[0];
if (modalHas) {
destroy(modalHas);
}
const div = document.createElement(`div`);
div.setAttribute(`class`, `smart-modal`);
const { onOk = () => { }, onCancel = () => { }, ...rest } = options;
const handleOk = () => {
onOk && onOk(); // eslint-disable-line
destroy(div);
};
const handleCancel = () => {
onCancel && onCancel(); // eslint-disable-line
destroy(div);
};
const smModal = (
<Modal
onOk={handleOk}
onCancel={handleCancel}
{...rest}
visible
>
{children}
</Modal>
);
document.body.appendChild(div);
ReactDOM.render(smModal, div);
}