当前位置：首页 > React

react如何拿到dom元素宽高

2026-01-25 20:29:01React

获取 DOM 元素宽高的方法

在 React 中获取 DOM 元素的宽高可以通过以下几种方式实现：

使用 `useRef` 和 `useEffect` 钩子

通过 useRef 创建引用，并在 useEffect 中访问 DOM 元素的宽高属性。

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      const { width, height } = ref.current.getBoundingClientRect();
      console.log('Width:', width, 'Height:', height);
    }
  }, []);

  return <div ref={ref}>测量宽高的元素</div>;
}

使用 `getBoundingClientRect()`

getBoundingClientRect() 返回元素的大小及其相对于视口的位置，包含 width 和 height 属性。

const element = document.getElementById('my-element');
const rect = element.getBoundingClientRect();
console.log('Width:', rect.width, 'Height:', rect.height);

使用 `offsetWidth` 和 `offsetHeight`

offsetWidth 和 offsetHeight 返回元素的布局宽高，包含边框和内边距。

const element = document.getElementById('my-element');
console.log('Width:', element.offsetWidth, 'Height:', element.offsetHeight);

使用 `ResizeObserver` 监听元素尺寸变化

ResizeObserver 可以监听元素尺寸的变化，适用于动态调整的场景。

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      const observer = new ResizeObserver(entries => {
        for (let entry of entries) {
          const { width, height } = entry.contentRect;
          console.log('Width:', width, 'Height:', height);
        }
      });
      observer.observe(ref.current);
      return () => observer.disconnect();
    }
  }, []);

  return <div ref={ref}>监听尺寸变化的元素</div>;
}

使用第三方库 `react-use-measure`

react-use-measure 是一个轻量级库，简化了获取元素宽高的操作。

react如何拿到dom元素宽高

import React from 'react';
import useMeasure from 'react-use-measure';

function MyComponent() {
  const [ref, { width, height }] = useMeasure();

  return (
    <div ref={ref}>
      当前宽高: {width} x {height}
    </div>
  );
}

注意事项

在 useEffect 中访问 DOM 元素，确保组件已挂载。
使用 ResizeObserver 时，注意在组件卸载时断开监听。
offsetWidth 和 offsetHeight 包含边框和内边距，而 getBoundingClientRect() 的宽高可能受 CSS 变换影响。