如何在Reactjs中获取孩子的宽度

// 父组件
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = useRef(null);

  const handleButtonClick = () => {
    if (childRef.current) {
      const childWidth = childRef.current.offsetWidth;
      console.log('孩子的宽度：', childWidth);
    }
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleButtonClick}>获取孩子的宽度</button>
    </div>
  );
}

// 子组件
import React from 'react';

const ChildComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>孩子组件</div>;
});

export default ChildComponent;

// 父组件
import React, { useState, useEffect } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [childWidth, setChildWidth] = useState(0);

  useEffect(() => {
    const handleResize = () => {
      if (childRef.current) {
        const width = childRef.current.offsetWidth;
        setChildWidth(width);
      }
    };

    window.addEventListener('resize', handleResize);
    handleResize();

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

  return (
    <div>
      <ChildComponent />
      <div>孩子的宽度：{childWidth}</div>
    </div>
  );
}

// 子组件
import React from 'react';

const ChildComponent = () => {
  return <div>孩子组件</div>;
};

export default ChildComponent;