【图片预览】第一种方式：hooks父组件调用子组件方法（1、子组件中使用useImperativeHandle钩子 2、父组件中使用useRef）【react-viewer】

1、安装：

　　npm install react-viewer --save

2、组件：ImgViewer/index.tsx

import React, { useState, useImperativeHandle } from 'react'
import Viewer from 'react-viewer'

interface ImgViewerProps {
  imgViewerRef: object
  downloadable?: boolean
}

const ImgViewer: React.FC = (props: any) => {
  const { imgViewerRef, downloadable = true } = props
  const [visible, setVisible] = useState<boolean>(false)
  const [activeIndex, setActiveIndex] = useState(0)
  const [images, setImages] = useState([])

  useImperativeHandle(imgViewerRef, () => ({
    setVisible: setVisible.bind(this, true), // 打开图片查看器
    setActiveIndex: (index: number) => setActiveIndex(index), // 设置索引
    setImages: (list: Array) => setImages(list) // 图片列表
  }))

  return (
    <Viewer
      visible={visible}
      images={images}
      activeIndex={activeIndex}
      onClose={setVisible.bind(this, false)}
      onMaskClick={setVisible.bind(this, false)} // 点击遮罩关闭
      downloadable={downloadable} // 是否显示下载按钮，默认显示，显示时imgs对象中需要有downloadUrl字段
      downloadInNewWindow // 新窗口打开图片
    />
  )
}

export default ImgViewer


3、使用：



    import React, { useState, useEffect, useRef } from 'react'




    import ImgViewer from '@/components/ImgViewer'




    const imgViewerRef = useRef()




  // 图片预览
  const handleImgPreview = (list: Array, index: number) => {
    const imgList: Array = list.map(({ alt, src }) => {
      return {
        alt, // 文件名
        src, // 文件地址
        downloadUrl: src, // 支持下载
      }
    })
    imgViewerRef.current.setVisible()
    imgViewerRef.current.setActiveIndex(index)
    imgViewerRef.current.setImages(imgList)
  }


　　数据结构：




[
    {
        "alt": "001.jpg",
        "src": "http://filegateway.test.mistong.com/api/filecenter/fileService/file/1134557650378359502",
        "downloadUrl": "http://filegateway.test.mistong.com/api/filecenter/fileService/file/1134557650378359502"
    },
    {
        "alt": "002.jpg",
        "src": "http://filegateway.test.mistong.com/api/filecenter/fileService/file/1134557650378359503",
        "downloadUrl": "http://filegateway.test.mistong.com/api/filecenter/fileService/file/1134557650378359503"
    },
    {
        "alt": "003每日用户行为.png",
        "src": "http://filegateway.test.mistong.com/api/filecenter/fileService/file/1134557650378359504",
        "downloadUrl": "http://filegateway.test.mistong.com/api/filecenter/fileService/file/1134557650378359504"
    },
    {
        "alt": "004.jpg",
        "src": "http://filegateway.test.mistong.com/api/filecenter/fileService/file/1134557650378359505",
        "downloadUrl": "http://filegateway.test.mistong.com/api/filecenter/fileService/file/1134557650378359505"
    },
    {
        "alt": "006.jpg",
        "src": "http://filegateway.test.mistong.com/api/filecenter/fileService/file/1134557650378359506",
        "downloadUrl": "http://filegateway.test.mistong.com/api/filecenter/fileService/file/1134557650378359506"
    }
]




　　DOM：



        <ImgViewer imgViewerRef={imgViewerRef} />




4、效果：




5、vue中v-viewer插件的使用：



6、react-viewer插件文档：https://www.npmjs.com/package/react-viewer

						  
					  
						
							


						

							
							
			react							
						



						

						
						


						

						
					
					

					
					

						
相关

						

				
						
			

																
								

										
react dom移动算法

									
									

								 

        

								

							
							

																
								

										
React组件重构：嵌套+继承 与 高阶组件

									
									

								 

        

								

							
							

																
								

										
React中嵌套组件与被嵌套组件的通信

									
									

								 

        

								

							
							

																
								

										
AntDesign(React)学习-15 组件定义、connect、interface

									
									

								 

        

								

							
							

																
								

										
初学ReactJS，写了一个RadioButtonList组件

									
									

								 

        

								

							
							

																
								

										
快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）

									
									

								 

        

								

							
							

																
								

										
react传值名称使用value可能出现死循环

									
									

								 

        

								

							
							

																
								

										
React Native bind函数

									
									

								 

        

								

							
							

																
								

										
React Native constructor方法内外this的区别

									
									

								 

        

								

							
							

																
								

										
使用 create-react-app 创建基于 ts 项目

									
									

								 

        

								

							
							

																
								

										
react源码解析17.context

									
									

								 

        

								

							
							

																
								

										
react源码解析14.手写hooks

									
									

								 

        

								

							
							
            
            
            
                                    
           
  			
						

					

					
				

				

														
					
					

					
									

					
									   
标签

										

										
    
										

									

										
										

									

					

					
				


			
		
		
		
			


						





	

	
一品网 冀ICP备14022925号-6