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
