晋江网站建设哪家好设计学习网站

基础用法

高度类型选择（宽度同理）：

属性	描述
offsetHeight	包含边框+内边距+内容
clientHeight	包含内边距+内容（不包含边框）
scrollHeight	包含滚动内容的全高（含隐藏部分）

JS可使用getElementById等选择器替换useRef：

const targetDiv = document.getElementById('myDiv');
const offsetHeight = targetDiv.offsetHeight

import React, { useRef, useEffect, useState } from 'react';function HeightComponent() {// 1. 创建 ref 对象const divRef = useRef(null);const [height, setHeight] = useState(0);// 3. 在组件挂载后访问 DOMuseEffect(() => {if (divRef.current) {// 4. 获取高度const divHeight = divRef.current.offsetHeight;setHeight(divHeight);console.log('Div 高度:', divHeight);}}, []); // 空依赖数组确保只在挂载时运行// 响应尺寸变化（可选）useEffect(() => {const handleResize = () => {if (divRef.current) {setHeight(divRef.current.offsetHeight);}};window.addEventListener('resize', handleResize);return () => window.removeEventListener('resize', handleResize);}, []);return (<div>{/* 2. 绑定 ref 到目标 div */}<div ref={divRef} style={{ padding: '20px', border: '1px solid red' }}>这是一个需要测量高度的 div<br />内容高度会变化...</div><p>Div 高度: {height}px</p></div>);
}export default HeightComponent;