标签：src const ImgViewer 查看器 viewer images 组件 alt

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

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

标签：src,const,ImgViewer,查看器,viewer,images,组件,alt
来源： https://www.cnblogs.com/wuqilang/p/15986730.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。