對antd的Modal改造

直接傳入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);
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章