React下获取width和height

原创于 2018-05-10 22:24:10 发布 · 5.1w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react #ref #width #height

javascript 同时被 3 个专栏收录

12 篇文章

订阅专栏

react

3 篇文章

订阅专栏

ref

1 篇文章

订阅专栏

本文介绍了一种在React中通过ref引用DOM元素并获取其宽度和高度的方法。具体实现是定义了一个saveRef函数来保存DOM节点引用，并在点击事件中通过clientWidth和clientHeight属性读取元素的尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React下获取width和height

利用ref保存DOM节点，然后读取clientWidth,clientHeight获取宽高参数。

import React, { Component } from 'react';
import 'assets/css/App.css'


export class App extends Component {


  constructor(props) {
    super(props);

    this.saveRef = ref => {this.refDom = ref};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    const {clientWidth, clientHeight} = this.refDom;
    console.log('====================================');
    console.log(clientWidth, clientHeight, this.refDom);
    console.log('====================================');
  }

  render() {

    return (
      <div ref={this.saveRef} onClick={this.handleClick} > Loading...</div>
    );
  }
}

export default App;