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】

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/689938.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

20. 【Linux教程】emacs 编辑器

前面小节介绍了如何使用 vim 编辑器和 nano 编辑器,本小节介绍 emacs 编辑器,emacs 编辑器最开始是作为控制台的编辑器,并且 emacs 编辑器仍然提供最早的命令行模式。 1. 检查 Linux 系统中是否安装 emacs 编辑器 使用如何命令检查 emacs 编…

SpringIOC之support模块SimpleThreadScope

博主介绍:✌全网粉丝5W+,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验✌ 博主作品:《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+…

JavaScript:循环与遍历

文章目录 循环ForFor-of (ES6)For-inWhileDo-While注意以上for与while方法均支持break与continue 数组遍历(不支持break与continue,return只是结束当前的回调函数执行)Array.prototype.forEach()Array.prototype.map()Array.prototype.filter()Array.prototype.redu…

PAM | 账户安全 | 管理

PAM PAM(Pluggable Authentication Modules,可插入式身份验证模块)是一个灵活的身份验证系统,允许我们通过配置和组合各种模块来实现不同的身份验证策略。 在 Linux 或类 Unix 系统中,常见的 PAM 模块包括以下几种类…

NLP-词袋模型

词袋模型是自然语言处理中常用的一种文本表示方法,用于将文本转换为数值型向量,以便于计算机进行处理和分析。在词袋模型中,文本被看作是一个由词语组成的集合,而每个词语都是独立的,不考虑它们在文本中的顺序和语境关…

Fabric中的溯源方法

背景 在Fabric链码中,我们可以使用PutState方法对一个key的值进行覆盖,当我们再使用GetState查询时是最新的值。如果我们希望找到这个key的修改记录,我们可以使用溯源方法GetHistoryForKey。完整源码链接:https://github.com/hyp…

零基础搭建 Kubernetes 集群

零基础搭建 Kubernetes 集群 1、简介 在数字化时代,容器技术已经变成了软件开发和部署的标准,而在众多容器管理工具中,Kubernetes(简称为 K8s)凭借其高效的资源管理、弹性伸缩和自我修复的能力,成为了行业…

Vue3学习——响应式原理

vue2原理 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。 问题: 新增属性…

文件 IO 2月18日学习笔记

标准IO和文件IO的区别: 1.标准IO是库函数,是对系统调用的封装 2.文件IO是系统调用,是Linux内核中的函数接口 3.标准IO是有缓存的 4.文件IO是没有缓存的 文件IO: 1.操作步骤: 打开 -> 读/写 -> 关闭 2.打开文…

多线程、分布式运行用例

python多线程 threading模块 多线程实例 # -*- coding: utf-8 -*- # Time : 2024/2/7 15:50 # Author : 居里夫人吃橘子 # File : class01.py # Software: PyCharm import threading from time import sleepdef run(name):print(name 该起床了)sleep(2)print(name …

Linux CentOS系统安装SQL Server并结合内网穿透实现公网访问本地数据

🔥博客主页: 小羊失眠啦. 🎥系列专栏:《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞👍收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默&…

Ubuntu在终端编辑完配置文件怎么保存退出?

1.退出,按【Ctrlx】,回车键。 2.保存,则先按【Ctrlo】,回车键,再按【Ctrlx】退出

小白水平理解面试经典题目LeetCode 1025 Divisor Game【动态规划】

1025 除数游戏 小艾 和 小鲍 轮流玩游戏&#xff0c;小艾首先开始。 最初&#xff0c;黑板上有一个数字 n 。在每个玩家的回合中&#xff0c;该玩家做出的动作包括&#xff1a; 选择任意 x&#xff0c;使 0 < x < n 和 n % x 0 。将黑板上的数字 n 替换为 n - x 。 此…

Dom节点继承树基本操作

遍历节点树 基于元素节点树的遍历 parcntElcrmcnt -> 返回当前元素的父元秦节点 (IE不兼容)children ->只返回当前元素的元素子节点node.childFlement(ount nodechildren.length当前元素节点的子元素(IE不兼容)firstElementChild->返回的是第一个元素节点(IE不兼容)l…

IDEA-常用插件

1、Mybatis Log Free 当我们使用mybatis log在控制台输出sql 内容&#xff0c;输出内容将语句与参数分开打印&#xff0c;还需要手动将参数替换到指定位置。 使用对应插件后&#xff0c;自动将输出内容组装成完整的可直接执行的SQL 在插件市场 查看对应名称&#xff0c;并安装。…

【数据结构】图的存储与遍历

图的概念 图是由顶点集合及顶点间的关系组成的一种数据结构&#xff1a;G (V&#xff0c; E) 图分为有向图和无向图 在有向图中&#xff0c;顶点对<x, y>是有序的&#xff0c;顶点对<x&#xff0c;y>称为顶点x到顶点y的一条边(弧)&#xff0c;<x, y>和&l…

基于微信小程序的校园跑腿系统的研究与实现,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

轻松入门MySQL:优化复杂查询,使用临时表简化数据库查询流程(13)

在进销存管理系统中&#xff0c;复杂的数据查询是司空见惯的。这些查询往往需要处理大量的数据&#xff0c;并执行复杂的逻辑操作。然而&#xff0c;处理这些查询可能会变得非常耗时&#xff0c;并且难以维护。为了解决这个问题&#xff0c;我们可以利用临时表&#xff0c;这是…

IDEA无法下载源代码(Maven无法下载源代码)

问题 这两天在突击SpringBoot&#xff0c;按ctrl打开一个SpringBoot的类想要下载源代码&#xff0c;居然下载不了&#xff0c;右下角弹窗提示无法下载源代码 百度查了查&#xff0c;在本地仓库里下载失败的目录下有个.lastUpdate的文件记录了一些信息 #NOTE: This is a Maven…

CNC加工:不只是魔法,还是科技与艺术的完美融合!

前言 亲爱的朋友们&#xff0c;你们好&#xff01;我是香蕉&#xff01;今天我将带你们一起走进CNC加工的世界&#xff0c;这是一个充满创意、精确无比、甚至有点神秘的领域。准备好跟我一起探索这个科技与艺术的交汇点了吗&#xff1f; 一、CNC加工&#xff1a;不只是名字酷…