【hooks子组件调用父组件方法】封装react-viewer图片查看器

本文主要是介绍【hooks子组件调用父组件方法】封装react-viewer图片查看器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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去调用子组件暴露出来的方法。

对于数据流向，建议将数据放在父组件去处理，子组件只做展示用，不对数据进行操作

这篇关于【hooks子组件调用父组件方法】封装react-viewer图片查看器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！