作者:平凡王子轶 | 来源:互联网 | 2023-09-08 15:38
react封装通用组件之Modal弹窗工作中发现我们在做react后台管理系统的时候,会有大量重复的页面(如下图),比如form表单和table组件、以及接口通讯,新增修改moda
react 封装通用组件之Modal弹窗
工作中发现我们在做react后台管理系统的时候,会有大量重复的页面(如下图),比如form表单和table组件、以及接口通讯,新增修改modal等。虽然antd里面的组件已经很简便了,但是遇到众多功能类似的页面,每次都复制大量的代码还是会耗费很大的时间而且不易维护,看起来很不清爽,于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的业务。
Modal 弹窗的封装
封装的意义: 简化代码,提高可复用性,工作中尤其是管理类的页面大多会涉及到新增、修改列表,多数情况下我们会在modal中进行,在修改时会调回显内容接口,在新增时清理调框内的内容。当我们封装好Modal组件后的好处,就是涉及到相关业务,只需要修改List即可,在list中选择你要在modal中展示的内容,和相关的关键词,下图只展示了输入框和下拉框,但是在组件的封装中其实封装了很多的内容,具体的可以拉下代码,详细的看一下,封装的过程可能会有点繁琐,但是在实践中,会相当便捷。
完成后的效果
![《react 封装通用组件之Modal弹窗》](https://img.php1.cn/3cd4a/94ce/a6e/865776f6fe3d5f59.jpeg)
![《react 封装通用组件之Modal弹窗》](https://img.php1.cn/3cd4a/1e618/c5a/d5d40da532c3a782.png)
1. 新建basicModal组件
在component中新建一个basicModal.js的表格,主要代码如下
![《react 封装通用组件之Modal弹窗》](https://img.php1.cn/3cd4a/1eebe/cd5/8343fdbffb0056b5.webp)
![《react 封装通用组件之Modal弹窗》](https://img.php1.cn/3cd4a/1eebe/cd5/443b30bb45e66690.webp)
- 代码较多,只能贴出一部分,详细代码点击下面的github获取
思路
1.通过组件封装一个Modal,将数组列表传递进来,遍历根据不同类型的判断把需要展示到页面的元素添加render出来。
2. 在子组件中处理完数据后,通过this.props.方法 把内容提到页面中进行操作。
3.把Radio、Checkbox 列表写到了Util方法中。
2. 页面调用
在index.js 页面中的调用如下:
![《react 封装通用组件之Modal弹窗》](https://img.php1.cn/3cd4a/1eebe/cd5/d942b7ec373849c3.webp)
在modalFormList中选择你需要的零件
![《react 封装通用组件之Modal弹窗》](https://img.php1.cn/3cd4a/1eebe/cd5/6c257b6ba227cc3e.webp)
如图:只需要修改modalFormList数组中的对象即可,需要几个加几个,非常方便
3. 处理radioList和CheckboxList在Util文件中
在util 中的index.js中, 代码如下:![《react 封装通用组件之Modal弹窗》](https://img.php1.cn/3cd4a/1eebe/cd5/02c379d60086f382.webp)
4. 完成后的界面,具体方法的实现,没有贴出来, 请到github中获取
![《react 封装通用组件之Modal弹窗》](https://img.php1.cn/3cd4a/1eebe/cd5/21e585a7e21fc7dc.png)
![《react 封装通用组件之Modal弹窗》](https://img.php1.cn/3cd4a/1eebe/cd5/7d7ef3f69d479716.webp)
链接地址:
网页地址
github 地址:
github