React + TS:如何获得所有儿童的身高？

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

interface ChildComponentProps {
  onReportHeight: (height: number) => void;
}

const ChildComponent: React.FC<ChildComponentProps> = ({ onReportHeight }) => {
  const childRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (childRef.current) {
      onReportHeight(childRef.current.clientHeight);
    }
  }, [onReportHeight]);

  return <div ref={childRef}>我是子组件</div>;
};

export default ChildComponent;

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent: React.FC = () => {
  const [childrenHeights, setChildrenHeights] = useState<number[]>([]);

  const handleReportHeight = (height: number) => {
    setChildrenHeights(prevHeights => [...prevHeights, height]);
  };

  return (
    <div>
      <h1>子组件的高度</h1>
      <ul>
        {childrenHeights.map((height, index) => (
          <li key={index}>子组件 #{index + 1} 的高度: {height}px</li>
        ))}
      </ul>
      <ChildComponent onReportHeight={handleReportHeight} />
      {/* 可以添加更多的子组件 */}
    </div>
  );
};

export default ParentComponent;