基礎用法

高度類型選擇（寬度同理）：

屬性	描述
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;