api和封装，让Modal组件使用更加便捷
最近有个页面，用到多个Modal，于是好几对[isVisible, setIsVisible] = useState(false);，以及确定、取消事件。
嫌麻烦~，仔细查下官网
简单的 Modal，可以使用 api
简单的 modal，直接使用api 调用，最最方便的！
Modal.info({ title: 'This is a notification message', content: ( <div> <p>some messages...some messages...</p> </div> ), onOk() {}, });
Modal.infoModal.successModal.errorModal.warningModal.confirm
复杂些的 Modal，封装成组件
复杂些，封装到一个组件里，逻辑自洽。
使用的时候xxRef.current.open()
封装也很简单:
import { useImperativeHandle, useState, forwardRef } from 'react'; import { Modal } from 'antd'; const ModalCreate = forwardRef((props, ref) => { const [isVisible, setIsVisible] = useState(false); const close = () => { setIsVisible(false); }; // 只暴露想暴露的方法 useImperativeHandle(ref, () => ({ open: () => { setIsVisible(true); }, close, })); return ( <Modal title="Basic Modal" open={isVisible} onOk={close}> 内容 </Modal> ); }); export default ModalCreate;
使用的时候
import ModalCreate from '...'; const modalCreateRef = useRef(); modalCreateRef.current.open(); <ModalCreate ref={modalCreateRef} />;
注意事项
<Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置destroyOnClose`。<Modal />和Form一起配合使用时，设置destroyOnClose也不会在 Modal 关闭时销毁表单字段数据，需要设置<Form preserve={false} />。Modal.method() RTL模式仅支持hooks用法。
