react如何获取div的高度
使用 useRef 和 useEffect 获取 Div 高度
在 React 中，可以通过 useRef 钩子创建一个引用，并将其附加到目标 div 上。结合 useEffect 钩子，在组件挂载或更新后获取 div 的高度。
import React, { useRef, useEffect, useState } from 'react';
function Component() {
const divRef = useRef(null);
const [height, setHeight] = useState(0);
useEffect(() => {
if (divRef.current) {
setHeight(divRef.current.offsetHeight);
}
}, []);
return (
<div ref={divRef}>
Div 的高度是：{height}px
</div>
);
}监听窗口大小变化动态更新高度
如果 div 的高度可能因窗口大小变化而改变，可以监听 resize 事件动态更新高度。
useEffect(() => {
const handleResize = () => {
if (divRef.current) {
setHeight(divRef.current.offsetHeight);
}
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);使用 getBoundingClientRect 获取精确高度
getBoundingClientRect 方法可以返回 div 的精确尺寸信息，包括高度、宽度、位置等。
useEffect(() => {
if (divRef.current) {
const rect = divRef.current.getBoundingClientRect();
setHeight(rect.height);
}
}, []);在类组件中获取 Div 高度
如果使用类组件，可以通过 createRef 或回调 ref 的方式获取 div 的高度。
class Component extends React.Component {
constructor(props) {
super(props);
this.divRef = React.createRef();
this.state = { height: 0 };
}
componentDidMount() {
if (this.divRef.current) {
this.setState({ height: this.divRef.current.offsetHeight });
}
}
render() {
return (
<div ref={this.divRef}>
Div 的高度是：{this.state.height}px
</div>
);
}
}使用 ResizeObserver 监听元素尺寸变化
现代浏览器支持 ResizeObserver API，可以更高效地监听元素尺寸变化。
useEffect(() => {
const observer = new ResizeObserver((entries) => {
for (let entry of entries) {
setHeight(entry.contentRect.height);
}
});
if (divRef.current) {
observer.observe(divRef.current);
}
return () => observer.disconnect();
}, []);这些方法涵盖了 React 中获取 div 高度的常见场景，适用于函数组件和类组件，并能处理动态变化的情况。
