当前位置：首页 > React

react如何获取遍历元素的宽度

2026-01-26 00:06:39React

在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>
  );
}