对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);
}
    原文作者:chinawzc
    原文地址: https://segmentfault.com/a/1190000016910998
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞