序文
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响应数据=', msg.data); if (msg.isSuccess && msg.data.length > 0) { setOcrImageList(msg.data); // 更新图片列表状态 } } catch (error) { console.error(error); } }; const handleImageClick = (imagePath: string) => { setCurrentImage(imagePath); // 设置当前点击的图片路径 setVisible(true); // 显示大图预览 }; return ( <Row gutter={ 24}> { /* 遍历渲染图片列表 */} { ocrImageList.map((image) => ( { /* 图片容器 */} <Col span={ 4} key={ image.id}> { /* 图片元素 */} <div style={ { border: '1px solid #ccc', borderRadius: '8px', padding: '16px', marginBottom: '20px' }}> <img src={ image.imgPath} alt={ image.id} style={ { width: '100%', objectFit: 'contain', cursor: 'pointer' }} onClick={ () => handleImageClick(image.imgPath)} // 点击图片时调用 handleImageClick 函数 /> </div> { /* 图片描述 */} <div style={ { textAlign: 'center' }}>{ image.content}</div> // 显示图片内容 </Col> ))} { /* 大图预览弹窗 */} <Modal visible={ visible} onCancel={ () => setVisible(false)} footer={ null} className="custom-modal"> <img src={ currentImage} alt="Preview" style={ { height: "100%", width: "100%" }} /> </Modal> </Row> ); };上記のコードでは、(画像リスト データ)、(モーダル ボックスの表示と非表示の制御)、(現在プレビューされる画像のパス) など
useStateの複数の状態変数を維持するために使用します。ocrImageListvisiblecurrentImageupdateOcrImageListデータを非同期で取得する関数を使用しocrImageList、handleImageClick関数内で画像をクリックしてプレビューをトリガーする機能を実装します。返された では
JSX、ループを実行しocrImageList、およびantdコンポーネントを使用して画像を表示します。画像をクリックすると、関数が呼び出されて設定および状態が設定され、それによってプレビュー モーダル ボックスが表示されます。ColRowhandleImageClickcurrentImagevisible
拡大（プレビュー画像切り替え）：
- 新規インポート
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';
- プレビュー モーダル ボックスの前または次の画像に切り替えます。対応するコードの変更は次のとおりです。
// ...
// 点击图片触发预览功能
const handleImageClick = (index: number) => {
setPreviewIndex(index);
};
// 关闭预览
const handleClosePreview = () => {
setPreviewIndex(-1);
};
// 创建预览图片路径数组
const previewImages = ocrImageList.map((image) => image.imgPath);
return (
<Row gutter={
24}>
{
/* 遍历渲染图片列表 */}
{
ocrImageList.map((image, index) => (
<Col span={
4} key={
image.id}>
{
/* 图片容器 */}
<div style={
{
border: '1px solid #ccc', borderRadius: '8px', padding: '16px', marginBottom: '20px' }}>
{
/* 图片元素 */}
<img
src={
image.imgPath}
alt={
image.id}
style={
{
width: '100%', objectFit: 'contain', cursor: 'pointer' }}
onClick={
() => handleImageClick(index)} // 点击图片时调用 handleImageClick 函数
/>
</div>
{
/* 图片描述 */}
<div style={
{
textAlign: 'center' }}>{
image.content}</div>
</Col>
))}
{
/* 如果正在预览图片，渲染预览模态框 */}
{
previewIndex !== -1 && (
<Lightbox
// 配置预览相关属性
mainSrc={
previewImages[previewIndex]}
nextSrc={
previewImages[(previewIndex + 1) % previewImages.length]}
prevSrc={
previewImages[(previewIndex + previewImages.length - 1) % previewImages.length]}
onCloseRequest={
handleClosePreview}
onMovePrevRequest={
() => setPreviewIndex((previewIndex + previewImages.length - 1) % previewImages.length)}
onMoveNextRequest={
() => setPreviewIndex((previewIndex + 1) % previewImages.length)}
/>
)}
</Row>
);
// ...
上記のコードでは、react-image-lightboxライブラリを使用して画像プレビュー機能を実装しています。ユーザーが画像をクリックすると、プレビュー モーダル ボックスが開き、プレビュー モーダル ボックス内で前または次の画像に切り替えることができます。プレビュー モーダルを閉じると、プレビュー インデックスは にリセットされます-1。
注意, 上記のコードは単なる例です。ニーズに基づいて、さらにスタイルとロジックを調整できます。
要約する
この記事では、React と antd ライブラリを使用して複数画像プレビュー機能を実装する方法を紹介し、プレビュー モーダル ボックスで前後の画像に切り替える拡張機能を実装します。状態を管理し、ユーザーのクリック イベントを処理することで、この機能を簡単に実装できます。この記事が、複数画像プレビューの技術的な実装方法を理解し、応用するのに役立つことを願っています。