react如何拿到盒子的宽高
获取盒子宽高的方法
在React中，可以通过多种方式获取DOM元素的宽高信息。以下是几种常见的方法：
使用useRef和useEffect
通过useRef创建引用并绑定到目标元素，在useEffect中通过getBoundingClientRect()或offsetWidth/offsetHeight获取尺寸。
import React, { useRef, useEffect, useState } from 'react';
function Component() {
const boxRef = useRef(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
useEffect(() => {
if (boxRef.current) {
const { width, height } = boxRef.current.getBoundingClientRect();
setDimensions({ width, height });
}
}, []);
return <div ref={boxRef}>Box dimensions: {dimensions.width}x{dimensions.height}</div>;
}使用ResizeObserver
对于需要响应尺寸变化的场景，可以使用ResizeObserver API监听元素尺寸变化。
useEffect(() => {
const observer = new ResizeObserver(entries => {
const { width, height } = entries[0].contentRect;
setDimensions({ width, height });
});
if (boxRef.current) observer.observe(boxRef.current);
return () => observer.disconnect();
}, []);通过事件回调获取
某些情况下可以通过事件回调获取元素尺寸，例如在布局完成后的回调中。
const handleLayout = (event) => {
const { width, height } = event.nativeEvent.layout;
console.log(width, height);
};
return <View onLayout={handleLayout} style={styles.box} />;注意事项
- 获取元素尺寸应在组件挂载完成后进行（useEffect内）
- 对于动态内容，需要考虑重新计算尺寸的时机
- 在SSR场景下，DOM元素可能不存在，需要做兼容处理
- 某些CSS属性（如transform）会影响getBoundingClientRect()的结果
跨平台方案
在React Native中获取视图尺寸的方法略有不同：
import { View, Text } from 'react-native';
<View
onLayout={(event) => {
const { width, height } = event.nativeEvent.layout;
console.log(width, height);
}}
>
<Text>Measure this view</Text>
</View>以上方法覆盖了大多数需要获取元素尺寸的场景，开发者可以根据具体需求选择最适合的方案。
