React TypeScript中Input/TextArea的Ref类型赋值错误求助

我尝试为输入框指定ref，但编译器在textInputRef处报错，无法确定正确的类型定义。相关代码如下：

父组件定义 #

private place: React.RefObject<HTMLInputElement> = React.createRef();
private description: React.RefObject<HTMLTextAreaElement> = React.createRef();

组件使用代码 #

<FormText textInputRef={this.place}>Name of place</FormText>
<FormText textInputRef={this.description} area>

FormText组件Props定义 #

type FormTextProps = {
  textInputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
};

FormText组件渲染逻辑 #

render() {
    const { textInputRef } = this.props;
    const InputElement = area ? 'textarea' : 'input';
    return (
      <label>
        <InputElement
          type="text"
          ref={textInputRef}
        />
      </label>
    );
  }

报错信息 #

Type 'RefObject<HTMLInputElement | HTMLTextAreaElement> | undefined' is not assignable to type '((string | RefObject<HTMLTextAreaElement> | ((instance: HTMLTextAreaElement | null) => void)) & (string | RefObject<HTMLInputElement> | ((instance: HTMLInputElement | null) => void))) | null | undefined'.
  Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type '((string | RefObject<HTMLTextAreaElement> | ((instance: HTMLTextAreaElement | null) => void)) & (string | RefObject<HTMLInputElement> | ((instance: HTMLInputElement | null) => void))) | null | undefined'.
    Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type '((instance: HTMLTextAreaElement | null) => void) & RefObject<HTMLInputElement>'.
      Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type '(instance: HTMLTextAreaElement | null) => void'.
        Type 'RefObject<HTMLInputElement | HTMLTextAreaElement>' provides no match for the signature '(instance: HTMLTextAreaElement | null): void'.ts(2322)

解决方案 #

问题核心是Props中定义的联合类型RefObject，无法匹配渲染时动态切换的input/textarea元素的专属ref类型。以下是几种可行的修复方式：

方式一：条件类型关联area属性与ref类型 #

通过条件类型让Props的ref类型和area属性绑定，TypeScript会自动根据area的值推断ref的正确类型：

// 定义带条件类型的Props
type FormTextProps<T extends boolean = false> = {
  area?: T;
  textInputRef?: T extends true 
    ? React.RefObject<HTMLTextAreaElement> 
    : React.RefObject<HTMLInputElement>;
};

// 组件定义时使用泛型
class FormText<T extends boolean = false> extends React.Component<FormTextProps<T>> {
  render() {
    const { textInputRef, area } = this.props;
    const InputElement = area ? 'textarea' : 'input';
    return (
      <label>
        <InputElement
          type="text"
          ref={textInputRef}
        />
      </label>
    );
  }
}

方式二：使用通用React.Ref类型替换RefObject #

将Props的ref类型改为更宽泛的React.Ref，它兼容对象ref和函数式ref，同时支持两种元素类型：

type FormTextProps = {
  area?: boolean;
  textInputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
};

这种方式无需修改组件渲染逻辑，直接替换类型定义即可。

方式三：类型断言快速修复（不推荐） #

如果不想修改类型定义，可在绑定ref时做类型断言，强制编译器通过类型检查：

<InputElement
  type="text"
  ref={textInputRef as React.RefObject<HTMLInputElement> | React.RefObject<HTMLTextAreaElement>}
/>

此方式属于妥协方案，会丢失部分类型检查的严谨性，仅适合临时快速修复。

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