应用场景

在调用Modal的时候需要在页面上引入Modal的文件，还需要写对应的open的state，传的组件参数也可能需要state，为了解决繁琐的调用，使用函数调用的方式弹出弹窗，并将参数传入props。
核心思路：使用ReactDom将Modal组件挂载在创建的DOM中。

高阶组件MyModal

const MyModal = ({
	ModalComponent,
   onModalChange = () => null,
   ...args
}) => {
	const [modal,setModal] = useState(true); // 调用该组件直接显示弹窗
    
    useMemo(() => {
    	onModalChange(modal); // 当modal改变时回调给调用者
    }, [modal]);
    
    return <ModalComponent modal={modal} setModal={setModal} {...args} />;
}

高阶组件定义好那么如何使用呢？定义一个showModal的方法用于传组件和组件参数

import React from 'react';
import ReactDOM from 'react-dom';
export const showModal = (Component, args = {}) => {
	const node = document.createElement('div');
   const onModalChange = (modal) => {
   		if (!modal){
   			try {
         	document.body.removeChild(node);   
         } catch(err){
         	// console.log(err);
         }    
    
       }
   }
   // 挂载到node中
   ReactDom.render(
   		<MyModal ModalComponent={Component} onModalChange={onModalChange} {...args} />,
      node
   );
}

showModal方法定义好了，那我们如何定义自己的Modal组件呢？定义方式如下：

import {Modal} from 'antd';
export const AddOrUpdateModal = ({
	modal, // 必写
   setModal, //必写
   initValues = {} // 组件参数
}) => {
	
    return (
    	<>
       {
       		modal && 
          <Modal
          	onCancel={() => setModal(false)}
           open={modal}
          >
          	内容
          <Modal/>
          	
       } 
      </>
    )
}

接下来就可以在任何组件的方法中调用自己的弹窗了，上述弹窗可使用如下代码:

showModal(AddOrUpdateModal,{ // 直接弹出AddOrUpdateModal弹窗内容，不需要繁琐的页面配置
	initValues: {}
})