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.rhkb.cn/news/427367.html

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

相关文章

网站建设的服务器该如何选择?

服务器的选择对于网站的稳定运行、性能表现以及成本控制至关重要。以下是一些关键的考虑因素&#xff0c;帮助你选择适合的服务器&#xff1a; 明确需求&#xff1a;你需要先明确网站的需求和目标。这包括确定服务器将用于托管什么样的应用&#xff08;如Web前端、应用服务器、…

基于vue框架的宠物寻回小程序8g7el(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;发布人,宠物分类,宠物信息,接取人,接取信息,完成信息 开题报告内容 基于Vue框架的宠物寻回小程序开题报告 一、研究背景与意义 随着城市化进程的加快和人们生活水平的提高&#xff0c;宠物已成为许多家庭不可或缺的一员。它们不仅为生…

RK3568平台(网络篇)MAC地址烧录

一.max地址简介 MAC地址(Media Access Control Address)也称为硬件地址或物理地址(Physical Address),它是一个用来确认网络设备位置的位址。在OSI模型中,第二层数据链路层则负责MAC位址 。MAC地址用于在网络中唯一标示一个网卡,一台设备若有一或多个网卡,则每个网卡都…

[数据集][目标检测]俯拍航拍森林火灾检测数据集VOC+YOLO格式6116张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;6116 标注数量(xml文件个数)&#xff1a;6116 标注数量(txt文件个数)&#xff1a;6116 标注…

Mamba YOLO World

论文地址&#xff1a;https://arxiv.org/pdf/2409.08513v1 代码地址&#xff1a; GitHub - Xuan-World/Mamba-YOLO-World: Mamba-YOLO-World: Marrying YOLO-World with Mamba for Open-Vocabulary Detection 开集检测&#xff08;OVD&#xff09;旨在检测预定义类别之外的物体…

gma 2.0.13 (2024.09.16) 更新日志

安装 gma 2.0.13 pip install gma2.0.13网盘下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1P0nmZUPMJaPEmYgixoL2QQ?pwd1pc8 提取码&#xff1a;1pc8 注意&#xff1a;此版本没有Linux版&#xff01; 编译gma的Linux虚拟机没有时间修复&#xff0c;本期Linux版…

基于SpringBoot+Vue的企业会议室预定管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…

【iOS】——JSONModel源码

JSONModel用法 基本用法 将传入的字典转换成模型&#xff1a; 首先定义模型类&#xff1a; interface Person : JSONModel property (nonatomic, copy) NSString *name; property (nonatomic, copy) NSString *sex; property (nonatomic, assign) NSInteger age; end接…

相亲交易系统源码详解与开发指南

随着互联网技术的发展&#xff0c;越来越多的传统行业开始寻求线上转型&#xff0c;其中就包括婚恋服务。传统的相亲方式已经不能满足现代人快节奏的生活需求&#xff0c;因此&#xff0c;开发一款基于Web的相亲交易系统显得尤为重要开发者h17711347205。本文将详细介绍如何使用…

FinGPT金融大模型

FinGPT仓库https://github.com/AI4Finance-Foundation/FinGPT 功能&#xff1a; Adviser。根据新闻判断市场情绪&#xff08;积极、消极、中性&#xff09;&#xff0c;给出投资建议。Quantitative Trading。定制属于自己的金融助手。叫它关注某几个股票、监测消息等。可以直…

Comsol 多孔弹性波应用三:吸声器(超宽频带)

超宽频带吸声材料&#xff08;Ultra-wideband absorbing materials&#xff09;是指能够在非常宽的频率范围内吸收声波的材料。传统的吸声材料通常只能在较窄的频率范围内有效吸收声波&#xff0c;而超宽频带吸声材料可以在更广泛的频率范围内实现高效的吸声效果。这使得超宽频…

光伏业务管理系统:全流程管理成重点

一、光伏业务管理的挑战 光伏业务管理涉及项目规划、设计选型、施工建设、运营维护、数据分析等多个环节&#xff0c;每一个环节都直接关系到项目的经济性、安全性和可持续性。传统的管理方式往往存在信息不对称、流程不透明、响应速度慢等问题&#xff0c;难以适应光伏产业快…

有毒有害气体检测仪的应用和性能_鼎跃安全

随着现代工业的不断发展和扩张&#xff0c;越来越多的企业涉及到有毒有害气体的生产、使用和处理。工业规模的扩大导致有毒有害气体的排放量增加&#xff0c;同时也增加了气体泄漏的风险。在发生火灾、爆炸或危险化学品泄漏等紧急事件时&#xff0c;救援人员需要迅速了解现场的…

面试官:什么是CAS?存在什么问题?

大家好&#xff0c;我是大明哥&#xff0c;一个专注「死磕 Java」系列创作的硬核程序员。 回答 CAS&#xff0c;Compare And Swap&#xff0c;即比较并交换&#xff0c;它一种无锁编程技术的核心机制。其工作方式分为两步&#xff1a; 比较&#xff1a;它首先会比较内存中的某…

JVM 运行时数据区域

目录 前言 程序计数器 java虚拟机栈 本地方法栈 java堆 方法区 运行时常量池 前言 首先, java程序在被加载在内存中运行的时候, 会把他自己管理的内存划分为若干个不同的数据区域, 就比如你是一个你是一个快递员, 一堆快递过来需要你分拣, 这个时候, 你就需要根据投放的目…

游戏如何应对云手机刷量问题

云手机的实现原理是依托公有云和 ARM 虚拟化技术&#xff0c;为用户在云端提供一个安卓实例&#xff0c;用户可以将手机上的应用上传至云端&#xff0c;再通过视频流的方式&#xff0c;远程实时控制云手机。 市面上常见的几款云手机 原本需要手机提供的计算、存储等能力都改由…

数据结构-3.2.栈的顺序存储实现

一.顺序栈的定义&#xff1a;top指针指向栈顶元素 1.图解&#xff1a; 2.代码&#xff1a; #include<stdio.h> #define MaxSize 10 //定义栈最多存入的元素个数 ​ typedef struct {int data[MaxSize]; //静态数组存放栈中元素int top; //栈顶指针 } SqStack; ​ int…

金手指设计

"MCP6294"。是一个轨到轨, 带宽为 10MHz 的 低功耗放大器. 对LM358测量 10MHz 范围内的频率特性&#xff0c;在 8MHz 左右&#xff0c;输出相移超过了 180。MCP6294的频率特性&#xff0c;则显示在 10MHz 运放相移之后 100左右。 对比两个运放的频率特性&#xff…

八股文-JVM

是什么&#xff1f;有什么用&#xff1f;谁发明的&#xff1f;什么时候发明的&#xff1f; Java虚拟机&#xff0c;用来运行Java程序&#xff0c;有很多个版本的虚拟机&#xff0c;比如HotSpot&#xff0c;最开始是SUN公司开发人员&#xff0c;和Java一起发布&#xff0c;现在…

通信工程学习:什么是PON无源光网络

PON&#xff1a;无源光网络 PON&#xff08;Passive Optical Network&#xff0c;无源光纤网络&#xff09;是一种采用光分路器等无源光器件进行信号传输和分配的光纤接入技术。它利用光纤作为传输媒介&#xff0c;通过无源设备将光信号从中心局&#xff08;如光线路终端OLT&am…