react如何获取遍历元素的宽度
在React中获取遍历元素的宽度可以通过多种方法实现，以下是几种常见的方式：
使用useRef和useEffect钩子
通过useRef创建引用并绑定到目标元素上，在useEffect中获取元素的宽度。适用于单个或多个需要动态测量的元素。
import { useRef, useEffect } from 'react';
function Component() {
const refs = useRef([]);
useEffect(() => {
refs.current.forEach((el) => {
if (el) {
console.log(el.getBoundingClientRect().width);
}
});
}, []);
return (
<div>
{[1, 2, 3].map((item, index) => (
<div
key={item}
ref={(el) => (refs.current[index] = el)}
>
Item {item}
</div>
))}
</div>
);
}使用ResizeObserver监听元素尺寸变化
当元素宽度可能动态变化时，ResizeObserver可以实时监听并返回最新的尺寸数据。
import { useEffect, useRef } from 'react';
function Component() {
const elementsRef = useRef([]);
useEffect(() => {
const observer = new ResizeObserver((entries) => {
entries.forEach((entry) => {
console.log(entry.contentRect.width);
});
});
elementsRef.current.forEach((el) => {
if (el) observer.observe(el);
});
return () => observer.disconnect();
}, []);
return (
<div>
{[1, 2, 3].map((item, index) => (
<div
key={item}
ref={(el) => (elementsRef.current[index] = el)}
>
Item {item}
</div>
))}
</div>
);
}通过回调Ref结合getBoundingClientRect
在渲染后立即获取元素宽度，适用于不需要动态监听但需初始化时测量的场景。
function Component() {
const handleRef = (el) => {
if (el) {
console.log(el.getBoundingClientRect().width);
}
};
return (
<div>
{[1, 2, 3].map((item) => (
<div key={item} ref={handleRef}>
Item {item}
</div>
))}
</div>
);
}使用第三方库（如react-use-measure）
简化尺寸测量的过程，自动处理ResizeObserver和性能优化。
import { useMeasure } from 'react-use-measure';
function Component() {
const [ref, { width }] = useMeasure();
return (
<div ref={ref}>
{width > 0 && <p>Width: {width}px</p>}
</div>
);
}注意事项
- 动态渲染的元素需确保DOM已挂载后再测量，通常在
useEffect或回调Ref中处理。 - 频繁监听可能导致性能问题，建议必要时使用防抖或节流优化。
- 在SSR环境下，浏览器API（如
getBoundingClientRect）需在客户端执行。
