如何检测React子元素是否溢出

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

function OverflowCheck() {
  const parentRef = useRef(null);
  const childRef = useRef(null);
  const [isOverflow, setIsOverflow] = useState(false);

  useEffect(() => {
    const parentWidth = parentRef.current.getBoundingClientRect().width;
    const childWidth = childRef.current.getBoundingClientRect().width;
    const parentHeight = parentRef.current.getBoundingClientRect().height;
    const childHeight = childRef.current.getBoundingClientRect().height;

    setIsOverflow(childWidth > parentWidth || childHeight > parentHeight);
  }, []);

  return (
    <div>
      <div ref={parentRef} style={{ width: "300px", height: "200px", overflow: "hidden" }}>
        <div ref={childRef} style={{ width: "400px", height: "250px" }}>
          {/* 子元素内容 */}
        </div>
      </div>
      {isOverflow && <div>子元素溢出</div>}
    </div>
  );
}

export default OverflowCheck;