1、ImgViewer/index.tsx
import React from 'react' import Viewer from 'react-viewer' interface ImgViewerProps { visible: boolean // 是否显示viewer images: Array<object> // 图片列表 [{src: '', alt: '',downloadUrl: ''}] activeIndex?: number // 下标,默认值为0,只有一张照片时可不传 handleClose: (value: any) => void // 触发父组件方法 downloadable?: boolean // 是否支持下载,默认:true } const ImgViewer: React.FC<ImgViewerProps> = (props: any) => { const { handleClose, visible, images, activeIndex = 0, downloadable = true } = props return ( <Viewer visible={visible} images={images} activeIndex={activeIndex} onClose={handleClose} onMaskClick={handleClose} // 点击遮罩关闭 downloadable={downloadable} // 是否显示下载按钮,默认显示,显示时imgs对象中需要有downloadUrl字段 downloadInNewWindow // 新窗口打开图片 /> ) } export default ImgViewer
2、使用
import ImgViewer from '@/components/ImgViewer'
// 传递给 ImgViewer 组件的三个值 const [visible, setVisible] = useState<boolean>(false) const [activeIndex, setActiveIndex] = useState<number>(0) const [images, setImages] = useState<any[]>([])
// 图片预览 const handleImgPreview = (list: Array<any>, index: number) => { const imgList: Array<object> = list.map(({ alt, src }) => ({ alt, src, downloadUrl: src })) setVisible(true) setActiveIndex(index) setImages(imgList) }
DOM:
<ImgViewer handleClose={setVisible.bind(this, false)} // 子组件中通过 handleClose 方法改变父组件中的state visible={visible} images={images} activeIndex={activeIndex} />
子调父的关键在于,将方法通过props传给子组件;
父调子的关键在于,子组件中通过useImperativeHandle钩子将方法暴露出去,父组件需要引入useRef去调用子组件暴露出来的方法。
对于数据流向,建议将数据放在父组件去处理,子组件只做展示用,不对数据进行操作