TypeScript中为动态标签名正确使用ref的方案

问题根源 #

当动态切换div/fieldset标签时，TypeScript无法自动关联元素类型与对应的Ref类型，导致出现「ref不可分配」的类型错误。

简洁解决方法 #

方法一：精确限定标签类型范围 #

通过Pick和keyof明确Component的可选标签范围，让TypeScript精准推断类型：

const FormGroup = React.forwardRef<
  HTMLFieldSetElement | HTMLDivElement,
  React.HTMLAttributes<HTMLFieldSetElement | HTMLDivElement>
>(({ children, className, ...props }, ref) => {
  const { group } = useForm();
  const Component: keyof Pick<JSX.IntrinsicElements, 'div' | 'fieldset'> = group ? 'fieldset' : 'div';

  return (
    <Component ref={ref} className={className} {...props}>
      {children}
    </Component>
  );
});

方法二：复用React固有元素类型（更精简） #

直接通过类型断言将动态标签指定为JSX.IntrinsicElements的键，快速消除类型错误：

const FormGroup = React.forwardRef<
  HTMLFieldSetElement | HTMLDivElement,
  React.HTMLAttributes<HTMLFieldSetElement | HTMLDivElement>
>(({ children, className, ...props }, ref) => {
  const { group } = useForm();
  const Component = (group ? 'fieldset' : 'div') as keyof JSX.IntrinsicElements;

  return (
    <Component ref={ref} className={className} {...props}>
      {children}
    </Component>
  );
});

说明 #

两种方案都能让TypeScript正确识别动态标签对应的Props和Ref类型，解决类型不兼容问题。第一种方式更严谨，仅允许指定的标签；第二种代码更简洁，适合快速修复。

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