如何使用 ReactJS 放大和缩小图像？

React 是一个用于构建用户界面的 JavaScript 库。 React 让创建交互式 UI 变得轻松。为应用程序中的每个状态设计简单的视图，当你的数据发生变化时，React 将有效地更新和呈现正确的组件。

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

示例：此示例说明如何使用 react 缩放图像

• 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)
     
    // Initializing states
    this.state = {height:null, width:null}
     
    // Bind context of 'this'
    this.handleZoomIn = this.handleZoomIn.bind(this)
    this.handleZoomOut = this.handleZoomOut.bind(this)
     
    // Create reference of DOM object
    this.imgRef = React.createRef()
  }
 
  componentDidMount(){
    // Saving initial dimension of image as class properties
    this.initialHeight = this.imgRef.current.clientHeight
    this.initialWidth = this.imgRef.current.clientWidth
  }
 
  // Event handler callback for zoom in
  handleZoomIn(){
   
    // Fetching current height and width
    const height = this.imgRef.current.clientHeight
    const width = this.imgRef.current.clientWidth
     
    // Increase dimension(Zooming)
    this.setState({
      height : height + 10,
      width : width + 10,
    }) 
  }
 
  // Event handler callback zoom out
  handleZoomOut(){
   
    // Assigning original height and width
    this.setState({
      height : this.initialHeight,
      width : this.initialWidth,
    })
  }
 
  render(){
    // Assign current height and width to the image
    const imgStyle = { height : this.state.height, width: this.state.width}
    return(
      

        
GeeksforGeeks
        {/* Assign reference to DOM element     */}
        
        

          Zoom In
          Zoom Out
        
      
   
    ) 
  }
}
export default App

输出 ：