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

function DynamicHeightDiv() {
  const [height, setHeight] = useState(0);
  const divRef = useRef(null);

  useEffect(() => {
    if (!divRef.current) return;

    const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        setHeight(entry.contentRect.height); // 更新状态
      }
    });

    resizeObserver.observe(divRef.current);

    return () => {
        if (!divRef.current) return;
      resizeObserver.unobserve(divRef.current);
    };
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ border: '1px solid black', padding: '10px' }}>
        动态内容...
      </div>
      <p>当前高度: {height}px</p>
    </div>
  );
}

export default DynamicHeightDiv;