如何使用 ReactJS 获取图像的高度和宽度？

在对我们编写的任何看起来像 HTML 的东西做出反应时，实际上并不是纯 HTML。所有看起来像 HTML 的东西都是 JSX，在幕后，它们使用 babel 转换为 vanilla JavaScript。所有这些都以这种方式工作，以使开发人员的生活更轻松。由于 JSX 不是 HTML，这就是为什么我们确实可以直接引用 HTML 元素，这就是为什么我们不能直接获取任何 HTML 元素的属性。为了获取元素的属性，React 提供了一个叫做 'ref' 的东西。使用 ref 我们可以创建对任何 HTML 元素的直接引用并控制 HTML 元素的属性。在这里，我们使用 'ref' 系统来获取图像的高度和宽度。

示例 1：此示例说明如何获取图像的当前高度和宽度。

• index.js：

  
  
  
  
  

• 应用程序.js：

  Javascript

  import React, { Component } from 'react'
  class App extends Component{
    constructor(props){ 
      super(props) 
    
      // Initialize count state 
      this.state = {show : false}
      // Bind context of 'this'
      this.handleClick = this.handleClick.bind(this)
      // Create reference of DOM object
      this.imgRef = React.createRef()
    } 
    
    renderDetails() {
      return this.state.show ? 
        // Accessing image details using imgRef
        
  
            
  Height :  
          {this.imgRef.current.clientHeight}px
    
            
  Width :  
          {this.imgRef.current.clientWidth}px
    
        
   : null
    }
    
    handleClick(){
    
      // Update state value
      this.setState({
        show : true
      })
    }
    
    render(){
      return( 
        
   
          
  GeeksforGeeks
          {/* Assign reference to DOM element     */}
          
          
  
            Get image details
          
          {this.renderDetails()}
        
      
      )  
    } 
  }
  export default App
  

输出 ：

示例 2：

• index.js：

  Javascript

  import React from 'react'
  import ReactDOM from 'react-dom'
  import App from './App'
    
  ReactDOM.render(, document.querySelector('#root'))
  

• 应用程序.js：

  Javascript

  import React, { Component } from 'react'
  class App extends Component{
    constructor(props){ 
      super(props) 
    
      // Initialize count state 
      this.state = {height:null, width:null, isIncrease:false}
    
      // Bind context of 'this'
      this.handleClick = this.handleClick.bind(this)
    
      // Create reference of DOM object
      this.imgRef = React.createRef()
    } 
    
    handleClick(){
    
      // Fetching current height and width
      const height = this.imgRef.current.clientHeight
      const width = this.imgRef.current.clientWidth
      alert(`
        Height : ${height}
        Width : ${width}
      `)
    }
    
    render(){
      return( 
        
   
          
  GeeksforGeeks
          {/* Assign reference to DOM element     */}
          
          
  
            
              Fetch dimension
            
          
        
      
      )  
    } 
  }
  export default App
  

输出 ：