在类型之间切换元素时 HTMLInputElement 抛出类型错误
HTMLInputElement throwing a type error when switching an element between types
我正在尝试编写代码 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>
);
}
您可以尝试强制 InputOrTextarea
上的类型以允许为其分配输入或文本区域。例如:
let InputOrTextarea: HTMLInputElement | HTMLTextAreaElement | null = Input;
if (textarea) {
InputOrTextarea = Textarea;
}
我正在尝试编写代码 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>
);
}
您可以尝试强制 InputOrTextarea
上的类型以允许为其分配输入或文本区域。例如:
let InputOrTextarea: HTMLInputElement | HTMLTextAreaElement | null = Input;
if (textarea) {
InputOrTextarea = Textarea;
}