在类型之间切换元素时 HTMLInputElement 抛出类型错误

Question

我正在尝试编写代码 React GraphQL TypeScript tutorial

目标：基本上 HTML 元素类型应该设置为元素 'Textarea' 如果默认变量：'textarea' = true，并设置为元素 'Input'如果变量：'textarea' = false.

目前我在第 6:05:28 分钟，我遇到了以下错误，但视频中没有出现，我不确定为什么。我意识到这并没有真正影响任何事情（事情仍然有效）但是它显示了一个非常烦人的红色下划线错误：

Type 'ComponentWithAs<"textarea", TextareaProps>' is not assignable to type 'ComponentWithAs<"input", InputProps>'.
Types of parameters 'props' and 'props' are incompatible.
Type 'MergeWithAs<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any, InputProps, any>' is not assignable to type 'MergeWithAs<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, any, TextareaProps, any>'.
Type 'MergeWithAs<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any, InputProps, any>' is not assignable to type 'OmitCommonProps<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, keyof TextareaProps>'.
Types of property 'ref' are incompatible.
Type 'LegacyRef<HTMLInputElement> | undefined' is not assignable to type 'LegacyRef<HTMLTextAreaElement> | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'LegacyRef<HTMLTextAreaElement> | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type '(instance: HTMLTextAreaElement | null) => void'.
Types of parameters 'instance' and 'instance' are incompatible.
Type 'HTMLTextAreaElement | null' is not assignable to type 'HTMLInputElement | null'.
Type 'HTMLTextAreaElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, capture, and 26 more.

给出错误的行是：InputOrTextarea 以红色突出显示并出现上述错误

InputOrTextarea = Textarea;

完整代码为：

type InputFieldProps = InputHTMLAttributes<HTMLInputElement> & {
  label: string;
  name: string;
  textarea?: boolean;
};

export const InputField: React.FC<InputFieldProps> = ({
  label, 
  textarea,
  size: _,
  ...props
}) => {
  let InputOrTextarea = Input;
  if (textarea) {
    InputOrTextarea = Textarea;
  }
  const [field, {error, }] = useField(props);
    return (
      <FormControl isInvalid = {!!error}>
        <FormLabel htmlFor={field.name}>{label}</FormLabel>
        <InputOrTextarea {...field} {...props} id = {field.name} placeholder={props.placeholder}/>
        {error ? <FormErrorMessage>{error}</FormErrorMessage> : null}
      </FormControl>
    );
}

Answer 1

您可以尝试强制 InputOrTextarea 上的类型以允许为其分配输入或文本区域。例如：

  let InputOrTextarea: HTMLInputElement | HTMLTextAreaElement | null = Input;
  if (textarea) {
    InputOrTextarea = Textarea;
  }

在类型之间切换元素时 HTMLInputElement 抛出类型错误

HTMLInputElement throwing a type error when switching an element between types

html

reactjs

react-hooks

formik

chakra-ui