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去呼叫子元件暴露出來的方法。

對於資料流向，建議將資料放在父元件去處理，子元件只做展示用，不對資料進行操作