1.安装依赖
使用npm，或者pnpm进行包安装依赖包

npm i react-viewer
# or pnpm add react-viewer

2.封装依赖包组件
将依赖包引入到文件之中，然后封装成组件，以备后面业务逻辑中使用；其示例代码如下：

import { FC, memo, useMemo } from 'react';
import Viewer from 'react-viewer';
import { nonEmptyArr } from '@lib/utils';interface imagesProps {src: string;alt: string;
}
interface ReactViewerProps {imgUrls: any[]; // 预览的数据visible: boolean; // 是否打开弹窗handleClose: () => void; // 弹窗回调getImageUrl: (str: string) => string; // 获取cnd地址函数key?: string; // 获取需要预览数据的keyactiveIndex?: number; // 打开弹窗当前预览图片的位置needCDN?: boolean; // 是否需要使用CDN地址 
}const ReactViewer: FC<ReactViewerProps> = ({imgUrls,visible,handleClose,getImageUrl,key,activeIndex = 0,needCDN = true,
}) => {const images: imagesProps[] = useMemo(() => {const imgArr: any = [];if (nonEmptyArr(imgUrls)) {imgUrls.forEach((item: any) => {if (key) {imgArr.push({src: needCDN ? getImageUrl(item?.[key]) : item?.[key],alt: '',});} else {imgArr.push({src: needCDN ? getImageUrl(item) : item,alt: '',});}});}return imgArr;}, [imgUrls]);return (<>{nonEmptyArr(images) && visible && (<Viewer visible={visible} onClose={handleClose} images={images} activeIndex={activeIndex} />)}</>);
};export default memo(ReactViewer);

3.使用示例
如何正确的使用一封装好的组件组件，其使用场景如下所示：

import dynamic from 'next/dynamic';
import { useState } from 'react';
const ReactViewer = dynamic(() => import('../ReactViewer'), { ssr: false });
const TestDemo = () = > {const imgUrls = ['abc.png','bcd.jpg'];const [showBigImage, setShowBigImage] = useState<boolean>(false);const getImageUrl = () => {// todo... 获取cdn的函数}const handleBigImg = () => {setShowBigImage((showBigImage) => !showBigImage)}return (<ReactViewervisible={showBigImage}handleClose={handleBigImg}imgUrls={imgUrls}getImageUrl={getImageUrl}/>)
}
export default TestDemo;