如何获取作为Props传入的React元素的尺寸信息？

我有一个名为Example的组件，接收customHeader作为Prop：

const Example = ({ children, customHeader }) => {
  // ...一些代码  

  return (
    <>
      {customHeader ? customHeader : <div>Default Header</div>}
      {children}
    </>
  );
}

使用时传入customHeader的方式如下：

<Example customHeader={<div>blah</div>}>
  <div>children</div>
</Example>

现在我想获取customHeader对应的DOM元素尺寸（比如clientHeight），但直接访问customHeader.clientHeight无效。打印customHeader得到的是React元素对象：

{
  $$typeof: Symbol(react.element)
  key: ".0"
  props: {children: 'Blah'}
  ref: null
  type: "div"
  _owner: FiberNode {tag: 0, key: null, stateNode: null, elementType: ƒ, type: ƒ, …}
  _store: {validated: false}
}

请问有没有办法把作为Prop传入的JSX元素转换成普通HTML元素，从而读取它的尺寸信息？

方法1：克隆传入的React元素并添加ref #

通过React.cloneElement克隆传入的customHeader，附加一个ref即可获取对应的DOM元素。示例代码：

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

const Example = ({ children, customHeader }) => {
  const headerRef = useRef(null);
  const [headerHeight, setHeaderHeight] = useState(0);

  useEffect(() => {
    if (headerRef.current) {
      // 初始获取高度
      setHeaderHeight(headerRef.current.clientHeight);
      // 监听尺寸变化，适配动态内容
      const observer = new ResizeObserver(entries => {
        setHeaderHeight(entries[0].target.clientHeight);
      });
      observer.observe(headerRef.current);
      return () => observer.disconnect();
    }
  }, [customHeader]);

  const renderedHeader = customHeader 
    ? cloneElement(customHeader, { ref: headerRef }) 
    : <div ref={headerRef}>Default Header</div>;

  return (
    <>
      {renderedHeader}
      <p>Header高度：{headerHeight}px</p>
      {children}
    </>
  );
}

注意：如果传入的customHeader本身带有ref，这种方式会覆盖原有ref。若需保留原有ref，可结合forwardRef和useImperativeHandle处理，适合复杂场景。

方法2：父组件预先传递尺寸信息 #

让传入customHeader的父组件先获取元素尺寸，再将尺寸值作为额外Prop传给Example组件：

// 父组件
const Parent = () => {
  const headerRef = useRef(null);
  const [headerHeight, setHeaderHeight] = useState(0);

  useEffect(() => {
    if (headerRef.current) {
      setHeaderHeight(headerRef.current.clientHeight);
    }
  }, []);

  return (
    <Example 
      customHeader={<div ref={headerRef}>blah</div>}
      headerHeight={headerHeight}
    >
      <div>children</div>
    </Example>
  );
}

// Example组件
const Example = ({ children, customHeader, headerHeight }) => {
  // 直接使用传入的headerHeight
  return (
    <>
      {customHeader ? customHeader : <div>Default Header</div>}
      <p>Header高度：{headerHeight}px</p>
      {children}
    </>
  );
}

方法3：用回调ref兼容原有ref #

如果需要保留customHeader自带的ref，可使用回调ref的方式，避免覆盖：

import { useState, cloneElement } from 'react';

const Example = ({ children, customHeader }) => {
  const [headerHeight, setHeaderHeight] = useState(0);
  
  const handleHeaderRef = (element) => {
    if (element) {
      setHeaderHeight(element.clientHeight);
      // 可选：添加ResizeObserver监听动态变化
    }
  };

  const renderedHeader = customHeader 
    ? cloneElement(customHeader, { 
        ref: (element) => {
          // 优先执行原有ref的回调（如果存在）
          if (typeof customHeader.ref === 'function') {
            customHeader.ref(element);
          }
          // 再执行自定义的ref逻辑
          handleHeaderRef(element);
        }
      }) 
    : <div ref={handleHeaderRef}>Default Header</div>;

  return (
    <>
      {renderedHeader}
      <p>Header高度：{headerHeight}px</p>
      {children}
    </>
  );
}

内容的提问来源于stack exchange，提问作者Avi