直接傳入API和原來Modal的children,而不傳入visible,讓Modal處理本身的數據node
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); }