react封装通用Modal弹窗组件

目录

1、【src/component/modal/hoc.js】

2、【src/component/modal/componentModal.js】

3、【src/page/projectView.js】


【说明】:后台管理的项目中会经常遇到弹窗,于是封装了一个简单的公共弹窗组件

这个公共组件不适用复杂的功能,简单的点击按钮调接口,打开弹窗进行数据回显。封装有改进的地方欢迎指出,后续项目遇到其他功能,也会对封装的弹窗改进

你们可以借鉴 ,在此基础上填充复杂的功能

模仿antd组件中的 Modal.confirm 进行封装的

1、【src/component/modal/hoc.js】

hoc.js文件是componentModal.js的外壳

2、【src/component/modal/componentModal.js】

函数组件的写法

uesEffect一进页面就会加载一次,如果点击弹窗需要调接口,要写在uesEffect里。

如果不需要调接口,需要当前行数据传给弹窗,使用字段currentLine,参考下面写法

3、【src/page/projectView.js】

上面两个文件封装好后,在页面中用法 如下写法

相关推荐
圈圈的熊6 分钟前
vue2 和 vue3的区别
前端·javascript·vue.js
Kika写代码9 分钟前
【基于轻量型架构的WEB开发】课程 作业4 AOP
java·前端·架构
前端与小赵3 小时前
关于 AJAX 与 Promise
前端·ajax·okhttp·promise
啊·贤4 小时前
展开运算符 (...):这是 JavaScript 中的一个语法,用于将数组或对象展开到另一个数组或对象中。
前端·javascript·vue.js
硬汉嵌入式4 小时前
《安富莱嵌入式周报》第345期:开源蓝牙游戏手柄,USB3.0 HUB带电压电流测量,LCR电桥前端模拟,开源微型赛车,RF信号扫描仪,开源无线电收发器
前端·游戏·开源
NiNg_1_2344 小时前
前端 Flex 布局语法详解
前端·css·html
吉吉安4 小时前
前端实现选项多选效果(三层结构)
前端·vue.js·html5
堕落年代6 小时前
React Native的生命周期
javascript·react native·react.js
青少儿编程课堂7 小时前
2024年3月电子学会Python等级考试试卷(四级)真题,包含答案
前端·javascript·python·电子学会·电子学会2024年3月真题·电子学会真题
始终奔跑在路上7 小时前
软件测试—HTML
前端·功能测试·html·集成测试·软件工程