【hooks子元件呼叫父元件方法】封裝react-viewer圖片檢視器
阿新 • • 發佈:2022-03-09
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去呼叫子元件暴露出來的方法。
對於資料流向,建議將資料放在父元件去處理,子元件只做展示用,不對資料進行操作