如何为React.forwardRef基于as Prop指定对应HTMLElement的Ref类型

要实现这个需求，核心是利用TypeScript泛型结合HTMLElementTagNameMap关联标签名与对应元素类型，具体实现如下：

1. 定义泛型Props接口 #

将Props改为泛型结构，让它依赖标签名类型T，同时继承对应标签的原生props（避免重复定义）：

interface Props<T extends keyof HTMLElementTagNameMap> {
  as: T;
  // 继承对应标签的原生props，排除ref（由forwardRef单独处理）
  ...React.ComponentPropsWithoutRef<T>;
}

2. 改造forwardRef为泛型组件 #

通过泛型约束标签名T，让ref的类型自动匹配HTMLElementTagNameMap[T]对应的元素类型：

const A = React.forwardRef(<T extends keyof HTMLElementTagNameMap>(
  props: Props<T>,
  ref: React.Ref<HTMLElementTagNameMap[T]>
) => {
  const { as: Tag, ...restProps } = props;
  return <Tag {...restProps} ref={ref} />;
});

3. 使用示例 #

当传入不同的as值时，ref的类型会自动推导匹配：

// ref自动推导为HTMLButtonElement类型
const buttonRef = useRef<HTMLButtonElement>(null);
<A as="button" ref={buttonRef}>点击按钮</A>;

// ref自动推导为HTMLInputElement类型
const inputRef = useRef<HTMLInputElement>(null);
<A as="input" ref={inputRef} type="text" placeholder="请输入内容" />;

关键说明 #

• T extends keyof HTMLElementTagNameMap：限制as只能传入合法的HTML标签名
• React.ComponentPropsWithoutRef<T>：自动继承对应标签的所有原生props（如button的disabled、input的type等），无需手动重复定义
• React.Ref<HTMLElementTagNameMap[T]>：借助HTMLElementTagNameMap的映射关系，让ref类型随as的取值自动匹配对应元素类型

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