React中如何获取经CSS resize属性调整的Div容器宽高

你之前的代码存在核心问题：textarea元素并不支持标准的resize事件，所以监听该事件不会触发回调，无法更新宽高数据。如果要监听Div容器的尺寸变化，同样不能直接使用resize事件，需要借助浏览器提供的ResizeObserver API实现。

解决方案代码 #

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

const ResizableDiv = () => {
  const [dimensions, setDimensions] = useState({ height: 0, width: 0 });
  const resizableDivRef = useRef(null);

  useEffect(() => {
    const target = resizableDivRef.current;
    if (!target) return;

    // 初始化ResizeObserver监听元素尺寸变化
    const observer = new ResizeObserver(entries => {
      const { width, height } = entries[0].contentRect;
      setDimensions({
        height: Math.round(height),
        width: Math.round(width)
      });
    });

    observer.observe(target);

    // 组件卸载时清理监听，避免内存泄漏
    return () => {
      observer.unobserve(target);
      observer.disconnect();
    };
  }, []);

  return (
    <div>
      <div
        ref={resizableDivRef}
        style={{
          width: '200px',
          height: '150px',
          border: '1px solid #ccc',
          resize: 'both',
          overflow: 'auto', // 必须设置overflow才能让resize属性生效
          padding: '8px'
        }}
      >
        拖动右下角调整容器大小
      </div>
      <p>高度: {dimensions.height}px</p>
      <p>宽度: {dimensions.width}px</p>
    </div>
  );
};

export default ResizableDiv;

关键说明 #

• ResizeObserver API：专门用于监听元素自身的尺寸变化，相比监听window.resize更精准，只会响应目标元素的尺寸改变。
• Div的resize生效条件：必须同时设置resize属性（可选值：both/horizontal/vertical）和overflow属性（值为auto/scroll/hidden，默认visible时resize不生效）。
• 内存泄漏防范：组件卸载前要调用unobserve和disconnect停止监听，避免不必要的资源占用。

如果是要监听textarea的尺寸变化，同样可以用上述代码逻辑，只需将div替换为textarea即可。

内容的提问来源于stack exchange，提问作者G K Sharma