react + antDesign封装图片预览组件(支持多张图片)

需求场景:最近在开发后台系统时经常遇到图片预览问题,如果一个一个的引用antDesign的图片预览组件就有点繁琐了,于是在antDesign图片预览组件的基础上二次封装了一下,避免重复无用代码的出现

效果

公共预览组件代码

import React, { useImperativeHandle, forwardRef, useState } from 'react';
import { message, Image } from 'antd';const ChildComponent = forwardRef((props, ref) => {
const [visible, setVisible] = useState(false);
const [imgList, setImgList] = useState([]);const showModal = async (list) => {setImgList(list);if (list.length === 0) {message.warning('暂无图片');} else {setVisible(true);}
};useImperativeHandle(ref, () => ({showModal
}));return (<div><div style={{ display: 'none' }}><Image.PreviewGroup preview={{ visible, onVisibleChange: (vis) => setVisible(vis) }}>{imgList.map((item) => {return <Image src={item.url} />;})}</Image.PreviewGroup></div></div>);
});export default ChildComponent;

使用方法

  1. 在项目components文件夹下新建preview文件夹
  2. preview文件夹下新建imgs.jsx把以上代码复制粘贴进去
  3. 在需要用到的地方引入
    import React, { useRef,useState } from 'react';
    import { Button } from 'antd';
    import Imgs from '../../.././components/Preview/imgs';export default () => {
    const imgsRef = useRef();
    const [imgList, setImgList] = useState([{name:'图片1',url:'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp'},{name:'图片2',url:'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp'},{name:'图片3',url:'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp'}
    ]);//预览图片
    const imgsPreview = (text) => {imgsRef.current.showModal(imgList);
    };return (<div><Button onClick={()=>{imgsPreview()}}></Button><Imgs ref={imgsRef} /></div>);
    };

注:本人前端小白 ,如有不对的地方还请多多指教

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

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

相关文章

JBoss EJBInvokerServlet CVE-2013-4810 反序列化漏洞

vulhub/jboss/JMXInvokerServlet-deserialization 1. 此漏洞存在于JBoss中 /invoker/JMXInvokerServlet 路径。访问若提示下载 JMXInvokerServlet&#xff0c;则可能存在漏洞&#xff1a; #创建class⽂件 javac -cp .:commons-collections-3.2.1.jar ReverseShellCommonsCol…

SpringBoot开发——整合Apache POI轻松生成精美的Excel报表

文章目录 1、准备工作2、编写代码2.1 创建实体类2.2 创建Excel生成服务2.3 创建控制器 3、测试4、结论 在许多企业应用程序中&#xff0c;导出数据到Excel表格是一项常见的需求。Spring Boot提供了许多库来简化这个过程&#xff0c;其中包括Apache POI和Spring Boot的相关模块。…

格力嵌入式面试题及参考答案

break 和 return 的区别 break 和 return 在编程语言中都用于控制程序的流程,但它们有很大的区别。 break 主要用于循环语句(如 for 循环、while 循环)和 switch 语句中。在循环中,当遇到 break 语句时,立即终止当前循环,程序将从循环后的下一条语句继续执行。例如在一个…

Qt 模型视图(四):代理类QAbstractItemDelegate

文章目录 Qt 模型视图(四):代理类QAbstractItemDelegate1.基本概念1.1.使用现有代理1.2.一个简单的代理 2.提供编辑器3.向模型提交数据4.更新编辑器的几何图形5.编辑提示 Qt 模型视图(四):代理类QAbstractItemDelegate ​ 模型/视图结构是一种将数据存储和界面展示分离的编程方…

Python国产新 ORM 框架 fastzdp_sqlmodel 快速入门教程

创建模型 from typing import Optional from sqlmodel import Field, SQLModel import fastzdp_sqlmodel as fasmclass Hero(SQLModel, tableTrue):id: Optional[int] Field(defaultNone, primary_keyTrue)name: strsecret_name: strage: Optional[int] None创建表 from ty…

系统架构设计师:软件可靠性

简简单单 Online zuozuo: 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo :本心、输入输出、结果 简简单单 Online zuozuo : 文章目录 系统架构设计师:软件可靠性前言软件可靠性可靠性的目标可以用如下方面来描述可靠性测…

IO流笔记

Java中的IO操作大体能分成两种&#xff1a;输出流和输入流&#xff0c;根据使用的流的方式&#xff0c;又可分为字符流和字节流。 1.读数据流 Reader和InputStream&#xff0c;它们都是抽象类&#xff0c;必须由其子类实例化。 实例化&#xff1a;FileReader和FileInputStream&…

【C语言零基础入门篇 - 7】:拆解函数的奥秘:定义、声明、变量,传递须知,嵌套玩转,递归惊艳

文章目录 函数函数的定义与声明局部变量和全局变量、静态变量静态变量和动态变量函数的值传递函数参数的地址传值 函数的嵌套使用函数的递归调用 函数 函数的定义与声明 函数的概念&#xff1a;函数是C语言项目的基本组成单位。实现一个功能可以封装一个函数来实现。定义函数的…

DPDK 简易应用开发之路 3:实现ping(ARP ICMP 协议)

本机环境为 Ubuntu20.04 &#xff0c;dpdk-stable-20.11.10 网卡IP为192.168.131.153 mac地址 00 0c 29 00 04 4d 理论基础 机器A内部没有机器B的物理地址&#xff0c;则 A ping B 的时候需要先发 arp 请求&#xff0c;以获取机器 B 的 MAC 地址。 获取 MAC 地址 如果 A 和 …

python画图1

import matplotlib.pyplot as pltplt.rcParams["font.sans-serif"] ["SimHei"]# 模拟数据 years [2016, 2017, 2018, 2019, 2020, 2021, 2022] market_size [7950, 8931, 9940, 11205, 12305, 13199, 14980] my_color #3e9df5plt.plot(years, market_s…

ER论文阅读-Decoupled Multimodal Distilling for Emotion Recognition

基本介绍&#xff1a;CVPR, 2023, CCF-A 原文链接&#xff1a;https://openaccess.thecvf.com/content/CVPR2023/papers/Li_Decoupled_Multimodal_Distilling_for_Emotion_Recognition_CVPR_2023_paper.pdf Abstract 多模态情感识别&#xff08;MER&#xff09;旨在通过语言、…

spring-boot-maven-plugin插件打包和java -jar命令执行原理

文章目录 1. Maven生命周期2. jar包结构2.1 不可执jar包结构2.2 可执行jar包结构 3. spring-boot-maven-plugin插件打包4. 执行jar原理 1. Maven生命周期 Maven的生命周期有三种&#xff1a; clean&#xff1a;清除项目构建数据&#xff0c;较为简单&#xff0c;不深入探讨&a…

面试速通宝典——1

1. 内存有哪几种类型&#xff1f; ‌‌‌‌  内存分为五个区&#xff0c;堆&#xff08;malloc&#xff09;、栈&#xff08;如局部变量、函数参数&#xff09;、程序代码区&#xff08;存放二进制代码&#xff09;、全局/静态存储区&#xff08;全局变量、static变量&#…

Gitlab学习(008 gitlab开发工作流GitFlow)

尚硅谷2024最新Git企业实战教程&#xff0c;全方位学习git与gitlab 总时长 5:42:00 共40P 此文章包含第27p-第p29的内容 文章目录 工作流分类集中式工作流功能开发工作流GitFlow工作流Forking工作流 各个分支的功能模拟工作环境创建分支登录领导&#xff08;项目管理者&#…

idea插件开发的第五天-今天不写工具

介绍 今天介绍一款插件,可以帮你调用spring容器里面的方法,并且可以执行脚本 Demo说明 本文基于maven项目开发,idea版本为2022.3以上,jdk为1.8本文在Tools插件之上进行开发本次demo将使用idea的一些组件优化 Tools插件说明 Tools插件是一个Idea插件,此插件提供统一Spi规范…

理解AAC和Opus的编码与解码流程

理解AAC和Opus的编码与解码流程及其在Android中的实现,对于音频开发非常重要。下面,我将详细解释这两种编码格式的原理、流程,并结合具体代码示例,帮助你在Android项目中合理地设计和使用它们。 一、AAC(Advanced Audio Coding) 1. AAC的原理与流程 AAC是一种有损音频压…

Linux实用命令 lsof命令

1.命令简介 lsof(list open files)用于查看进程打开的文件,是十分方便的系统监测工具。因为 lsof 命令需要访问核心内存和各种系统文件,所以需要root权限才可执行。 在 Linux 中,一切皆文件。通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件,所以lsof不仅可…

Linux自主学习篇

用户及权限管理 sudo 是 "superuser do" 的缩写&#xff0c;是一个在类 Unix 操作系统&#xff08;如 Linux 和 macOS&#xff09;中使用的命令。它允许普通用户以超级用户&#xff08;root 用户&#xff09;的身份执行命令&#xff0c;从而获得更高的权限。 useradd…

学生管理系统1.0版本

学生管理系统1.0版本有5个功能&#xff0c;即添加学生、删除学生、修改学生、查看全部学生、退出系统。 里面对添加重复学号、删除和修改不存在的学号等问题都有相应的解决办法。 代码区&#xff1a; Student.java package student;//快捷键Altinsert public class Student …

基于STM32设计的烘干车间远程控制系统(腾讯云IOT)(228)

文章目录 一、前言1.1 项目介绍【1】项目背景【2】设计实现的功能【3】项目硬件模块组成1.2 设计思路【1】整体设计思路【2】ESP8266工作模式配置1.3 项目开发背景【1】选题的意义【2】可行性分析【3】参考文献【4】项目背景【5】摘要1.4 开发工具的选择【1】设备端开发【2】上…