封装React AntD的dialog弹窗组件
前一段时间分享了基于vue和element所封装的弹窗组件(封装Vue Element的dialog弹窗组件),今天就来分享一个基于react和antD所封装的弹窗组件,反正所使用的技术还是那个技术,情况还是那个情况。只是基于vue所封装的弹窗组件和基于react所封装的弹窗组件还是有很大差别的。一样的是封装的思想和思路,不一样的是实现的技术。
至于所用到的技术,还是跟之前分享的有关react组件所用到的技术差不多,无非就是react hooks、函数式组件等。实现思路的话,还是在父组件中打开弹窗,关闭弹窗的操作就交给所封装的弹窗组件,不采用那种所谓的给子组件传一个关闭弹窗的函数,然后让子组件来触发,触发后再由父组件将关闭弹窗的参数传给子组件,这种实现思路可以是可以,但是太绕了,实现起来也麻烦不是?而且在每次使用这个弹窗组件时,还得在每个父组件中都写一个关闭弹窗的方法,不累吗?封装的目的是什么?一是统一样式和功能,二是高复用性,三是少写代码,降低开发量,提高开发效率。在我们国家不是有一句很流行的话吗?“让专业的人干专业的事儿”,比如让姚明出任篮协主席,让那个所谓“不懂球的胖子”出任乒协主席,就是这个理儿。
当然有人可能会说如果将关闭弹窗的操作只交给弹窗来做的话,那么万一要在关闭弹窗后再执行某个操作呢,比如弹窗中嵌套了表单组件,如果有表单正则验证没通过,会在表单输入框下边有一个红色的文字提示,此时若关闭弹窗,下次再打开弹窗时会发现那个红色的文字提示还在,这个问题咋解决?总不能在关闭弹窗的函数中加入一个重置表单的方法吧,那如果还有其他需求呢,是不是也要在关闭弹窗的函数中再加入一个方法呢?如果其他需求不需要这样的方法呢?很好,有这样的疑问,说明你考虑问题很全面,哈哈哈哈哈哈,且这样的需求也是实实在在存在的,但依然有很好的解决办法,那就是充分利用弹窗关闭后的回调方法。
关于弹窗关闭后的回调方法,antD和element的弹窗组件都有这个方法,只是element的弹窗组件在关闭后有两个回调:
1、close:Dialog关闭的回调
2、closed:Dialog关闭动画结束时的回调
对于这两个回调,我都拿来试了一把,发现在一般情况下它的效果和第一个的效果一样,那么官方对第二个回调给的解释是关闭动画结束时的回调,我就有点懵逼了。有兴趣的大佬或已经尝试过的大神别喷我,您就指着我的鼻子,居高临下地告诉我该怎么玩这个就可以了,我就会虚心接受的。
antD在关闭弹窗后也给了一个回调afterClose,官方的解释是Modal完全关闭后的回调,但人家就只给了这一个关闭后的回调,好吧,就这个回调已经足够我们实现我们的需求了。我们把那些需要在关闭弹窗后再做的一些事情都放在这个回调中,然后把这个回调从父组件再传给所封装的弹窗子组件就完事了。如果你不传,代表你没有这方面的需求,对弹窗的正常工作又没有丝毫的影响,这岂不是很香吗?
说了这么多,光说不练假把式,那就来看具体实现呗。
照例还是先来张效果图:
1、所封装的弹窗组件dialog.js
import React, { useState, useImperativeHandle } from 'react'
import PropTypes from 'prop-types'
import { Modal } from 'antd';
let ok = () => {};
const DialogCom = ({btnTxt = ['取消', '确定'], children, cRef, autoClose = true, ...reset}) => {
const [visible, setVisible] = useState(false);
const open = cb => {
setVisible(true);
ok = cb;
}
useImperativeHandle(cRef, () => ({
open: cb => open(cb),
}));
const handleCancel = () => {
setVisible(false);
}
const handleOk = () => {
autoClose && setVisible(false);
ok(handleCancel);
}
return <Modal
{...reset}
maskClosable={false}
visible={visible}
onOk={handleOk}
onCancel={handleCancel}
okText={btnTxt[1]}
cancelText={btnTxt[0]}
>
{children}
</Modal>
}
DialogCom.propTypes = {
btnTxt: PropTypes.array,
children: PropTypes.any.isRequired,
cRef: PropTypes.object.isRequired,
autoClose: PropTypes.bool,
}
export default DialogCom
以上代码中的具体实现思路这里就不再做过多的介绍了,可以移步封装Vue Element的dialog弹窗组件这里。封装Vue Element的dialog弹窗组件这篇博文已经对实现的思路做了详细的介绍了。
2、使用方法:
import React, { useRef } from 'react'
import { Button } from 'antd';
import Dialog from './dialog'
const DialogDemo = () => {
const childRef = useRef();
const open = () => {
childRef.current.open(cancel => {
// cancel();
console.log('打开')
});
}
const config = {
title: '提示',
btnTxt: ['关闭', '提交'],
centered: true,
width: '400px',
}
return <>
<Button type="primary" onClick={open}>打开弹窗</Button>
<Dialog {...config} cRef={childRef}>
<p>我是弹窗</p>
<p>我是弹窗</p>
</Dialog>
</>
}
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
封装React AntD的dialog弹窗组件的更多相关文章
- 封装react antd的表格table组件
封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格,降低代码重复率,降低劳动时间,减少加班的可能. 本次组件的封装采用了函数式组件即无状 ...
- 封装Vue Element的dialog弹窗组件
我本没有想着说要封装一个弹窗组件,但有同行的朋友在问我,而且弹窗组件也确实在项目开发中用的比较多.思前想后,又本着样式统一且修改起来方便的原则,还是再为大家分享一个我所封装的弹窗组件吧. 其实,并不是 ...
- 封装react antd的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...
- 封装react antd的upload上传组件
上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组 ...
- React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。
最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除 ...
- 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...
- 封装Vue Element的table表格组件
上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...
- react.js插件开发,x-dailog弹窗浮层组件
react.js插件开发,x-dailog弹窗浮层组件 我认为,每一个组件都应该有他自带的样式和属性事件回调配置.所以我会给x-dialog默认一套简单的样式,和各种默认的配置项.所有react插件示 ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
随机推荐
- 字段解析之OopMapBlock(4)
OopMapBlock是一个简单的内嵌在Klass里面的数据结构,用来描述oop中包含的引用类型属性,即该oop所引用的其他oop在oop中的内存分布,然后就可以根据当前oop的地址找到所有引用的其他 ...
- XCTF-WEB-高手进阶区(1-4)笔记
1:baby_web 题目描述:想想初始页面是哪个 通过Dirsearch软件扫描发现Index.php被藏起来了,访问他便会指向1.php 于是通过Burp修改Get为index.php,然后放入R ...
- 解决CocoaPods could not find compatible versions for pod "React/Core"
react-native框架中,在ios文件夹下执行pod install命令时出现的问题. 下面时完整的异常信息: [!] CocoaPods could not find compatible v ...
- C#LeetCode刷题之#191-位1的个数(Number of 1 Bits)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4052 访问. 编写一个函数,输入是一个无符号整数,返回其二进制表 ...
- Flutter 容器(4) - Container
Container 类似于HTML中的div标签 import 'package:flutter/material.dart'; class AuthList extends StatelessWid ...
- eclipse中 sec/test/resource 文件夹消失怎么设置?
右键改包--->build path --->Configure bulid path 按 add Folder 搞定.....
- Android 在代码中修改TextView的DrawableRight等方向上的图片
在XML文件中可以对TextView进行设置: android:drawableTop="@drawable/XXX" android:drawableBottom="@ ...
- 二叉搜索树及java实现
二叉搜索树(Binary Search Tree) 二叉搜索树是二叉树的一种,是应用非常广泛的一种二叉树,英文简称为 BST 又被称为:二叉查找树.二叉排序树 任意一个节点的值都大于其左子树所有节 ...
- vue+leaflet
1.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Shell编程—控制脚本
1处理信号 1.1信号表 编号 信号名称 缺省操作 解释 1 SIGHUP Terminate 挂起控制终端或进程 2 SIGINT Terminate 来自键盘的中断 3 SIGQUIT Dump ...