【图片预览】第二种方式：hooks子组件调用父组件方法

1、ImgViewer/index.tsx

import React from 'react'
import Viewer from 'react-viewer'

interface ImgViewerProps {
  visible: boolean // 是否显示viewer
  images: Array // 图片列表 [{src: '', alt: '',downloadUrl: ''}]
  activeIndex?: number // 下标，默认值为0，只有一张照片时可不传
  handleClose: (value: any) => void // 触发父组件方法
  downloadable?: boolean // 是否支持下载，默认：true
}

const ImgViewer: React.FC = (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(0)
  const [images, setImages] = useState([])




  // 图片预览
  const handleImgPreview = (list: Array, index: number) => {
    const imgList: Array = 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去调用子组件暴露出来的方法。


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

						  
					  
						
							


						

							
							
			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