React实现多图片预览功能、预览图上下张切换（实战示例）

原创

已于 2023-09-27 21:03:24 修改 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2023-09-27 20:34:49 首次发布

该博客介绍了在React项目中实现多图片预览及切换功能的方法。以OCR图像列表展示为例，通过导入组件、定义状态变量、异步获取数据等操作实现图片展示与预览。还介绍了在预览模态框中切换图片的拓展功能，可按需调整样式和逻辑。

前言

在React项目中，展示和预览多张图片是一种常见的需求。本篇帖子将介绍如何使用React和antd库来实现这一功能，并探讨如何在预览模态框中切换到前一张或后一张图片。

背景

我们将以一个OCR图像列表展示的示例来演示代码的运用。假设我们有一个OCR系统，可以将图片文件中的文本提取出来。我们希望在前端展示从OCR系统返回的图像列表，并支持点击图片来进行预览。此外，我们还希望在预览模态框中能够实现切换到前一张或后一张图片的功能。下面是具体的操作示例：

操作示例：

首先，我们需要导入所需的组件和hooks:

import React, {
     
      useEffect, useState } from 'react';
import {
     
      Row, Col, Modal} from 'antd';

接下来，我们定义一个Splitor组件，该组件将用于展示多张图片和实现预览功能：

const Splitor: React.FC = () => {
     
     
  const [ocrImageList, setOcrImageList] = useState<ETEST.ImageInfo[]>([]); // 图片列表的状态
  const [visible, setVisible] = useState(false); // 大图预览的可见性状态
  const [currentImage, setCurrentImage] = useState(""); // 当前点击的图片路径

  useEffect(() => {
     
     
    const intervalId = setInterval(updateOcrImageList, 1000 * 10); // 创建定时器，每 10 秒钟调用一次 updateOcrImageList 函数
    // 组件卸载时清除定时器
    return () => {
     
     
      clearInterval(intervalId);
    };
  }, []);

  const updateOcrImageList = async () => {
     
     
    try {
     
     
      const msg = await ocrList(); // 调用 ocrList 函数获取最新的图片列表
      console.log('ocrList响应数据=',