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】

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

业务型 编辑器组件的封装(复制即可使用)

使用需要安装 wangeditor npm i --save wangeditor import React from react; import E from wangeditor; import ./index.lessclass EditorElem extends React.Component {constructor(props) {super(props);this.isChange false;this.state {}}componentDidMount() {con…

并发List、Set、ConcurrentHashMap底层原理

并发List、Set、ConcurrentHashMap底层原理 ArrayList: List特点&#xff1a;元素有放入顺序&#xff0c;元素可重复 存储结构&#xff1a;底层采用数组来实现 public class ArrayList<E> extends AbstractList<E>implements List<E>, RandomAccess, Clon…

后端开发怎么学?

后端开发怎么学&#xff1f; 后端开发可以简单地理解为与前端开发相对应的开发方向。前端开发主要负责构建用户界面、维护用户体验等方面的工作&#xff0c;而后端开发则主要负责处理数据、逻辑和算法等方面的工作。后端开发旨在为前端应用程序提供支持&#xff0c;以帮助实现可…

stm32学习笔记-STLINK使用

stm32学习笔记-STLINK使用 使用ST-LINK调试程序进度表格 使用ST-LINK调试程序 说明 组成 总结 记录使用STLINK进行项目的烧写和调试&#xff0c;旨在高效的进行代码调试学习工具包括笔记本、keil5MDK、stm32f030c8t6电表主机、STLINK V2、导线、电表代码总的来说&#xff0…

vue3项目配置按需自动引入自定义组件unplugin-vue-components

我们通常在项目中&#xff0c;需要手动引入自定义的各种组件&#xff0c;如果涉及的页面功能比较多的话&#xff0c;光是import的长度都能赶上春联了。 如果&#xff0c;能有一个插件帮我们实现自动引入&#xff0c;是不是要谢天谢地了呢&#xff1f; 接下来就进入我们的主角u…

Uniapp-开发小程序

文章目录 前言一、npm run xxx —— cross-env: Permission denied解决方法&#xff08;亲测有效&#xff09;其他解决方法&#xff1a; 二、macOS 微信开发者工具选择uniapp 用 vscode 开发 总结 前言 macOS下 uniapp 开发小程序。 一、npm run xxx —— cross-env: Permissi…

数据结构:动态内存分配+内存分区+宏+结构体

一、作业 1.定义一个学生结构体&#xff0c;包含结构体成员&#xff1a;身高&#xff0c;姓名&#xff0c;成绩&#xff1b;定义一个结构体数组有7个成员&#xff0c;要求终端输入结构体成员的值&#xff0c;根据学生成绩&#xff0c;进行冒泡排序。 #include <stdio.h>…

大数据技术之 Kafka

大数据技术之 Kafka 文章目录 大数据技术之 Kafka第 1 章 Kafka 概述1.1 定义1.2 消息队列1.2.1 传统消息队列的应用场景1.2.2 消息队列的两种模式 1.3 Kafka 基础架构 第 2 章 Kafka 快速入门2.1 安装部署2.1.1 集群规划2.1.2 集群部署2.1.3 集群启停脚本 2.2 Kafka 命令行操作…

【Go语言】Go语言中的变量和常量

Go语言中的变量和常量 1 变量 变量相当于是对一块数据存储空间的命名&#xff0c;程序可以通过定义一个变量来申请一块数据存储空间&#xff0c;之后可以通过引用变量名来使用这块存储空间。 Go 语言是强类型静态语言&#xff0c;所以变量的声明与赋值方式与 PHP/Python 等动…

基于java的眼镜店仓库管理系统

源码获取&#xff0c;加V&#xff1a;qq2056908377 摘要&#xff1a; 随着电子商务的兴起&#xff0c;越来越多的商家选择在线销售他们的产品。眼镜店作为零售业的一种&#xff0c;也不例外。随着市场需求的不断增加&#xff0c;眼镜店需要更加高效的管理他们的仓库和库存&…

代码随想录算法训练营DAY20 | 二叉树 (8)

一、LeetCode 701 二叉搜索树中的插入操作 题目链接&#xff1a; 701.二叉搜索树中的插入操作https://leetcode.cn/problems/insert-into-a-binary-search-tree/description/ 思路&#xff1a;见缝插针罢辽。 class Solution {public TreeNode insertIntoBST(TreeNode root, i…

Spring基础-IOC理解及自己创建类+第三方提供的类注入的方法

Spring全称为Spring Framework,是一款主流的JAVA EE 开原框架,主要功能有:IOC(控制反转,层间解耦)、AOP&#xff08;面向切面编程&#xff0c;公共代码抽取&#xff09;、MVC&#xff08;开发web应用程序&#xff09;、数据库事务管理、web单元测试&#xff08;与测试框架集成&…

【深入理解设计模式】单例设计模式

单例设计模式 概念&#xff1a; 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一。 单例设计模式是一种创建型设计模式&#xff0c;其主要目的是确保类在应用程序中的一个实例只有一个。这意味着无论在应用程序的哪个位置请求该类的实例&a…

自定义异常处理演示

​ 为了防止黑客从前台异常信息&#xff0c;对系统进行攻击。同时&#xff0c;为了提高用户体验&#xff0c;我们都会都抛出的异常进行拦截处理。 一、全局异常处理 编写一个异常拦截类&#xff0c;如下&#xff1a;ControllerAdvice&#xff0c;很多初学者可能都没有听说过…

商品图放大镜效果实现

业务拆解 鼠标经过商品小图&#xff0c;展示块会显示对应商品图片鼠标经过展示块&#xff0c;右侧会显示放大镜效果的大图大图可跟随鼠标移动而显示对应的部分 关键JS代码 // 1. 获取三个盒子// 2. 小盒子 图片切换效果const small document.querySelector(.small)// 中盒子…

极狐GitLab 如何配置多个 LDAP?

本文仅适用于极狐GitLab私有化部署场景。 场景化痛点 极狐GitLab 的多 LDAP 接入功能解决了企业在以下场景中可能遇到的痛点&#xff1a; 多个组织/部门的整合&#xff1a;在大型企业或跨国公司中&#xff0c;往往存在多个组织或部门&#xff0c;它们可能拥有独立的 LDAP 服务…

las数据转pcd数据

las数据转pcd数据 一、算法原理1.介绍las2.主要函数 二、代码三、结果展示3.1 las数据3.2 las转换为pcd 四、相关数据链接 一、算法原理 1.介绍las LAS文件按每条扫描线排列方式存放数据,包括激光点的三维坐标、多次回波信息、强度信息、扫描角度、分类信息、飞行航带信息、飞…

LeetCode算法实践——前缀和从入门到入土

前缀和算法 对于一个数组a&#xff0c;和为s数组&#xff1b;其每一个下标的前缀和为s[0]0,s[i]s[i-1]a[i]。 从上面可以推导出left到right之间的前缀和为是s[right1]-s[left]。 例如a[3,2,1,2]&#xff0c;对应的前缀和数组为s[0,3,5,6,8]。a的子数组[2,1,2]的和就可以用s[…

ubuntu22.04@laptop OpenCV Get Started: 015_deep_learning_with_opencv_dnn_module

ubuntu22.04laptop OpenCV Get Started: 015_deep_learning_with_opencv_dnn_module 1. 源由2. 应用Demo2.1 C应用Demo2.2 Python应用Demo 3. 使用 OpenCV DNN 模块进行图像分类3.1 导入模块并加载类名文本文件3.2 从磁盘加载预训练 DenseNet121 模型3.3 读取图像并准备为模型输…

用pandas做简单策略回测

一&#xff0c;RSI策略 数据&#xff1a; 代码 import pandas as pd# 读取贵州茅台股票历史交易数据 df pd.read_csv(贵州茅台股票历史交易数据.csv) missing_values df.isnull().sum()# print("缺失值数量&#xff1a;") # print(missing_values)# 计算RSI指标 …