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】

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

相关推荐
wangruofeng20 分钟前
AI Models 1.1.0 发布,查大模型价格、对比模型和找 API 地址
前端·aigc·ai编程
wangruofeng23 分钟前
给前端开发者的 100 个设计参考网站
前端·设计
星栈3 小时前
视频即代码,Remotion 能做什么、不能做什么
前端·音视频开发
广州华水科技4 小时前
单北斗GNSS位移监测系统的应用与技术解析
前端
用户47949283569154 小时前
从一句话或代码仓到可交互 HTML:开源 Agent 画图技能 Archify v3.2 实测与选型边界
前端·后端·面试
风骏时光牛马6 小时前
生成一个AI多模态标题,仅输出一条标题,无额外文字、问句、备选、配图、文案等任何附加内容,不需要其他的任务服务 只要标题。
前端
wangruofeng7 小时前
从 GIF 到 AVIF:网页图片格式演进与 2026 年选型指南
前端·架构
清晨Coding8 小时前
为什么用 React Developer Tools 查看组件树这么乱?
前端·react.js
鶴哥只手遮天8 小时前
《Electron 45.2.3 内核解剖》第 4 章 补丁体系:380 个补丁改了什么
前端·electron
FungLeo10 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构