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; // 获取需要预览数据的key
activeIndex?: 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 (
<ReactViewer
visible={showBigImage}
handleClose={handleBigImg}
imgUrls={imgUrls}
getImageUrl={getImageUrl}
/>
)
}
export default TestDemo;