封装React AntD的dialog弹窗组件

1、所封装的弹窗组件dialog.js

importReact, { useState, useImperativeHandle }from'react'importPropTypesfrom'prop-types'import{ Modal }from'antd';letok =()=>{};constDialogCom =({btnTxt = ['取消','确定'], children, cRef, autoClose =true, ...reset}) =>{const[visible, setVisible] = useState(false);constopen =cb=>{    setVisible(true);    ok = cb;  }  useImperativeHandle(cRef, () => ({open:cb=>open(cb),  }));consthandleCancel =()=>{    setVisible(false);  }consthandleOk =()=>{    autoClose && setVisible(false);    ok(handleCancel);  }return{children}}DialogCom.propTypes = {btnTxt: PropTypes.array,children: PropTypes.any.isRequired,cRef: PropTypes.object.isRequired,autoClose: PropTypes.bool,}exportdefaultDialogCom

以上代码中的具体实现思路这里就不再做过多的介绍了，可以移步封装Vue Element的dialog弹窗组件这里。封装Vue Element的dialog弹窗组件这篇博文已经对实现的思路做了详细的介绍了。

2、使用方法：

importReact, { useRef }from'react'import{ Button }from'antd';importDialogfrom'./dialog'constDialogDemo =()=>{constchildRef = useRef();constopen =()=>{    childRef.current.open(cancel=>{// cancel();console.log('打开')    });  }constresetForm =()=>{console.log('重置表单')  }constconfig = {title:'提示',btnTxt: ['关闭','提交'],centered:true,width:'400px',afterClose: resetForm,// Modal完全关闭后的回调}return<>打开弹窗

我是弹窗

我是弹窗

}export default DialogDemo

使用方法中的代码这里也不再做介绍了，封装Vue Element的dialog弹窗组件这篇博文也介绍的很详细了。

最后还是再贴一下本次封装所用到的各个包的版本：

react: 16.8.6,

react-dom: 16.8.6,

react-router-dom: 5.0.0,

antd: 4.3.5,

@babel/core: 7.4.4,

babel-loader: 8.0.5

深圳网站建设www.sz886.com