如何在TypeScript辅助函数中遍历React子元素并访问其ref？FLIP动画函数类型标注解决方案

问题核心在于ReactNode类型过于宽泛——它包含了字符串、数字、布尔值等没有ref属性的类型，所以TypeScript会阻止你访问child.ref。我们需要通过类型缩小，只让函数接受带有DOM ref的React元素。

步骤1：定义符合要求的子元素类型 #

先创建一个类型，明确描述带有DOM ref的React元素：

type ElementWithDOMRef = React.ReactElement<{
  ref: React.RefObject<HTMLElement>;
}>;

这个类型确保子元素是标准React元素，且props中包含一个指向DOM元素的ref对象。

步骤2：修改函数的类型标注 #

接下来调整calculateBoundingBoxes的参数和返回值类型，同时添加运行时安全检查：

const calculateBoundingBoxes = (children: ElementWithDOMRef[]) => { 
  const boundingBoxes: Record<React.Key, DOMRect> = {}; 
  React.Children.forEach(children, (child) => { 
    if (!child) { 
      throw new Error("Child element cannot be null or undefined"); 
    }
    // TypeScript现在能确认child.props.ref是合法的DOM ref
    const domNode = child.props.ref.current; 
    if (!domNode) {
      throw new Error("Failed to get DOM node from child element's ref");
    }
    const nodeBoundingBox = domNode.getBoundingClientRect(); 
    boundingBoxes[child.key] = nodeBoundingBox; 
  }); 
  return boundingBoxes; 
};

兼容更灵活的场景（可选） #

如果你的children可能包含文本节点、Fragment等非元素类型，可以在遍历前先过滤出符合要求的元素：

const calculateBoundingBoxes = (children: React.ReactNode) => { 
  const boundingBoxes: Record<React.Key, DOMRect> = {}; 
  React.Children.forEach(children, (child) => { 
    // 先判断是否是合法React元素，且带有ref属性
    if (!React.isValidElement(child) || !child.props.ref) {
      return; // 跳过不符合要求的子元素，或根据需求抛出错误
    }
    // 断言ref的类型为指向DOM元素的RefObject
    const domRef = child.props.ref as React.RefObject<HTMLElement>;
    const domNode = domRef.current; 
    if (!domNode || !child.key) {
      throw new Error("Child element must have a valid key and attached DOM node");
    }
    const nodeBoundingBox = domNode.getBoundingClientRect(); 
    boundingBoxes[child.key] = nodeBoundingBox; 
  }); 
  return boundingBoxes; 
};

原代码报错的原因 #

ReactNode类型覆盖了字符串、数字等非元素类型，这些类型本身没有ref和key属性，TypeScript会严格阻止你访问不存在的属性。通过类型缩小或运行时检查，我们既满足了TypeScript的类型要求，也保证了代码运行时的安全性。

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