React如何要求子组件必须支持接收Ref？

要在TypeScript中约束你的MyComponent只接收能被ref引用的子组件，完全可以通过React内置的类型系统实现编译时检查，从根源上避免不符合要求的组件传入导致的运行时问题。

核心思路 #

React中支持ref的组件分为两类：

• 内置DOM组件（如<div>、<input>），它们的props默认包含ref属性
• 使用React.forwardRef包装的自定义组件，这类组件会显式接收并传递ref

我们需要定义一个类型，要求传入的子元素的props必须包含ref属性（可选），这样就能自动排除那些不支持ref的普通函数组件。

具体实现代码 #

import React from 'react';

// 定义只能接收支持ref的子元素的类型
type ChildWithRef = React.ReactElement<React.RefAttributes<unknown>>;

const MyComponent = ({ children }: { children: ChildWithRef }) => {
  return (
    <WrapperWhichExpectsChildToHaveRef>
      {children}
    </WrapperWhichExpectsChildToHaveRef>
  );
};

// ✅ 正常工作：内置div组件原生支持ref
<MyComponent><div>Hello</div></MyComponent>;

// ❌ 类型错误：普通函数组件不支持ref，TypeScript会直接报错
const NoForwardedRef = () => <div>Hello</div>;
<MyComponent><NoForwardedRef /></MyComponent>;

// ✅ 正常工作：使用forwardRef包装的自定义组件支持ref
const WithForwardedRef = React.forwardRef<HTMLDivElement>((props, ref) => {
  return <div ref={ref} {...props}>Hello</div>;
});
<MyComponent><WithForwardedRef /></MyComponent>;

类型原理说明 #

• React.RefAttributes<unknown>是React内置的类型，它定义了组件能接收ref属性的契约（这里用unknown表示ref可以是任意类型，你也可以换成具体类型比如HTMLDivElement来做更精确的约束）。
• React.ReactElement<React.RefAttributes<unknown>>要求传入的子元素必须是一个React元素，且其props符合RefAttributes的要求——只有内置DOM组件和forwardRef包装的组件满足这个条件。
• 普通函数组件的props默认不包含ref属性，所以对应的ReactElement会和ChildWithRef类型不匹配，TypeScript会立即抛出类型错误，提前帮你发现问题。

扩展：支持多个子元素 #

如果你的组件需要接收多个支持ref的子元素，可以把children类型修改为：

type ChildrenWithRef = ChildWithRef | ChildWithRef[];

这样就能同时支持单个或多个符合要求的子组件了。

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