如何在React的Layout组件中动态获取子元素（ReactNode）的宽高？

嘿，这个需求其实挺常见的，咱们完全可以通过React的几个核心API组合实现，不需要把ReactNode直接转换成HTMLDivElement，而且能完美适配动态数量的子元素。下面给你详细说下实现思路和代码示例：

核心思路 #

因为你没法提前知道子元素的数量，也不能要求使用Layout的页面传ref数组，所以咱们可以在Layout组件内部主动给每个子元素包裹一层容器（比如<div>），然后给这些容器绑定ref，通过ref获取真实DOM的尺寸。这种方式不需要修改任何子组件的代码，对外部完全透明。

具体实现代码 #

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

interface Props {
  // 这里放你自己的其他props
  children: ReactNode;
}

export default function Layout({ children, ...rest }: Props) {
  // 用ref数组存储每个子元素容器的DOM节点
  const childRefs = useRef<(HTMLDivElement | null)[]>([]);

  // 每次子元素变化时，重置ref数组，避免旧引用残留
  useEffect(() => {
    childRefs.current = [];
  }, [children]);

  // 封装获取子元素尺寸的函数
  const getChildSizes = () => {
    return childRefs.current
      .map(ref => {
        if (!ref) return null;
        const rect = ref.getBoundingClientRect();
        return {
          width: rect.width,
          height: rect.height,
          // 如果你需要位置信息，也可以把top/left等加进来
        };
      })
      .filter(Boolean); // 过滤掉无效的ref
  };

  // 组件挂载完成后，第一次获取子元素尺寸
  useEffect(() => {
    const sizes = getChildSizes();
    console.log('初始子元素尺寸:', sizes);
    // 这里可以把尺寸存到state里，或者触发自定义回调传给父组件
  }, [children]);

  // 可选：实时监听子元素尺寸变化（比如窗口resize、子元素内容更新）
  useEffect(() => {
    const observers = childRefs.current.map(ref => {
      if (!ref) return null;
      // 使用ResizeObserver监听容器尺寸变化
      const observer = new ResizeObserver(entries => {
        entries.forEach(entry => {
          const size = {
            width: entry.contentRect.width,
            height: entry.contentRect.height,
          };
          console.log('子元素尺寸更新:', size);
          // 这里可以更新state或者执行你的业务逻辑
        });
      });
      observer.observe(ref);
      return observer;
    });

    // 组件卸载时清理监听
    return () => {
      observers.forEach(observer => observer?.disconnect());
    };
  }, [children]);

  return (
    <div {...rest}>
      {/* 遍历所有子元素，给每个子元素包裹带ref的容器 */}
      {React.Children.map(children, (child, index) => {
        // 过滤掉无效的子元素（比如字符串、数字）
        if (!React.isValidElement(child)) return child;
        
        return (
          <div
            key={index} {/* 优先用子元素自身的key，没有的话用index兜底 */}
            ref={el => (childRefs.current[index] = el)}
            style={{ display: 'block' }} {/* 确保容器是块级元素，避免尺寸计算偏差 */}
          >
            {child}
          </div>
        );
      })}
    </div>
  );
}

关键细节说明 #

1. 为什么要包裹容器？
   直接给子组件加ref的话，如果子组件是函数组件，必须配合forwardRef才能拿到DOM，但你说子元素是完全无关的组件，没法修改它们的代码。包裹一层div后，我们能直接拿到这个容器的DOM，不需要改动任何子组件，兼容性拉满。

2. ref数组的重置
   每次children变化时（比如新增/删除子元素），重置ref数组，避免之前的旧DOM引用留在数组里导致尺寸计算错误。

3. ResizeObserver的作用
   如果你的子元素尺寸可能动态变化（比如内容加载、状态切换），用ResizeObserver能精准监听每个容器的尺寸变化，比监听window.resize更高效，也能覆盖非窗口resize导致的尺寸变化场景。

4. 关于ReactNode转DOM
   你不需要手动把ReactNode转换成HTMLDivElement，React会帮你把虚拟DOM渲染成真实DOM，我们只需要通过ref获取渲染后的真实DOM节点即可，代码里的childRefs.current存储的就是真实的HTMLDivElement实例。

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