动态计算react组件的高度

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

const DynamicHeightComponent = () => {
  const [contentHeight, setContentHeight] = useState(0);
  const contentRef = useRef(null);

  useEffect(() => {
    const updateContentHeight = () => {
      if (contentRef.current) {
        setContentHeight(contentRef.current.offsetHeight);
      }
    };

    updateContentHeight();

    // 监听内容变化
    // 如果是异步加载的内容，可能需要额外的处理来监听内容加载完成
    // 可以使用MutationObserver或其他相关方法
    window.addEventListener('resize', updateContentHeight);

    return () => {
      window.removeEventListener('resize', updateContentHeight);
    };
  }, []);

  return (
    <div style={{ height: contentHeight }}>
      <div ref={contentRef}>
        {/* 组件内容 */}
      </div>
    </div>
  );
};

export default DynamicHeightComponent;