React下获取width和height
程序员文章站
2022-05-04 23:40:43
...
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;
推荐阅读
-
React基础(四)- 获取对象的键和值
-
H5 canvas中width、height和style的宽高区别详解
-
jquery获取颜色在ie和ff下的区别示例介绍
-
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
-
linux下用time(NULL)函数和localtime()获取当前时间的方法
-
ASP UTF-8编码下字符串截取和获取长度函数
-
关于CSS和JS中用到的各种Height和Width的问题
-
React下style和class实例讲解
-
ASP.NET MVC下使用AngularJs语言(六):获取下拉列表的value和Text
-
CSS中width和height的默认值auto与%案例详解