Как получить высоту и ширину изображения с помощью ReactJS?

Реагируя на все, что мы пишем, похоже, что HTML на самом деле не является чистым HTML. Все, что выглядит как HTML, - это JSX, за кулисами они конвертируются в ванильный JavaScript с помощью babel. Все это работает таким образом, чтобы облегчить жизнь разработчикам. Поскольку JSX не является HTML, поэтому у нас есть прямая ссылка на элементы HTML и поэтому мы не можем напрямую получать свойства любого элемента HTML. Чтобы получить свойство элемента, React дает нечто, называемое «ref». Используя ref, мы можем создать прямую ссылку на любые элементы HTML и получить контроль над свойствами элементов HTML. Здесь мы используем систему ref для получения высоты и ширины изображения.

Пример 1. В этом примере показано, как получить текущую высоту и ширину изображения.

• index.js:

  Javascript

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

• App.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 <div> <p><strong>Height : </strong> { this .imgRef.current.clientHeight}px</p> <p><strong>Width : </strong> { this .imgRef.current.clientWidth}px</p> </div> : null } handleClick(){ // Update state value this .setState({ show : true }) } render(){ return ( <div> <h3>GeeksforGeeks</h3> { /* Assign reference to DOM element */ } <img ref={ this .imgRef} src= ' https://media.geeksforgeeks.org/wp-content/uploads/20200617121258/gfg-image2-300x177.png ' alt= 'gfg' /> <div> <button onClick={ this .handleClick}>Get image details</button> </div> { this .renderDetails()} </div> ) } } export App default

Выход :

Пример 2:

• index.js:

  Javascript

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

• App.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 ( <div> <h3>GeeksforGeeks</h3> { /* Assign reference to DOM element */ } <img ref={ this .imgRef} src= ' https://media.geeksforgeeks.org/wp-content/uploads/20200819170816/colorfulbulmaheroelements-300x154.png ' alt= 'gfg' /> <div> <button onClick={ this .handleClick}> Fetch dimension </button> </div> </div> ) } } export App default

Выход :