具有useFormContext和自定義標記的型別“IntrinsicAttributes”上不存在屬性

最近，我改變了我的自定義輸入組件使用的反應useFormContext，而不是通過errors和register通過道具的組件給他們。由于這樣做，我遇到了這個煩人的打字稿錯誤：

Property 'defaultValue' does not exist on type 'IntrinsicAttributes'

拿這部分代碼：

           <Tag
                type={type}
                id={title}
                {...register(title)}
                defaultValue={defaultValue}
                placeholder={placeholder}
                disabled={disabled}
            />

它僅在 下顯示錯誤defaultValue，但如果我將其洗掉，則它決定將其顯示在 下，如果洗掉，則placeholder依此類推。

另外，我已經注意到這個問題沒有很好地通過改變解決Tag到input，因為那時我不能使用的組件，例如這是不好的，textarea投入。它之前確實有效，我只是使用表單背景關系更改了它，所以不知道為什么它不喜歡那樣。

有沒有人知道為什么會出現這個問題？表格的相關部分：

const CreatePageForm: FC<CreatePageFormProps> = ({ createPage, setCreatePageModalIsOpen, loadingCreatePage }) => {
    const methods = useForm<PageFormInputs>({
            resolver: yupResolver(createPageSchema),
            mode: 'onTouched',
        });
        // const { // was like this commented out before, when it worked
        //     register,
        //     handleSubmit,
        //     formState: { errors },
        // } = useForm<PageFormInputs>({
        //     resolver: yupResolver(createPageSchema),
        //     mode: 'onTouched',
        // });
        const onSubmit: SubmitHandler<PageFormInputs> = (data) => createPage(data);
    
        return (
            <FormProvider {...methods}>
                <form onSubmit={methods.handleSubmit(onSubmit)}>
                    <div className={styles.formInner}>
                        <InputField type='text' title='title' />
                        <SelectField type='select' title='type' defaultValue=''>
                        <InputField type='textarea' title='notes' />
                        ...

組件：

interface InputFieldProps {
    title: string;
    type: string;
    defaultValue?: any;
    cls?: string;
    placeholder?: string;
    disabled?: boolean;
}

export const InputField: FC<InputFieldProps> = ({ title, type, defaultValue, cls, placeholder, disabled = false }) => {
    const { register } = useFormContext();
    const tags: { [key: string]: string } = {
        text: 'input',
        textarea: 'textarea',
        // select: 'select',
    };
    const Tag = tags[type];

    return (
        <FieldContainer title={title} cls={cls}>
            <Tag
                type={type}
                id={title}
                {...register(title)}
                defaultValue={defaultValue}
                placeholder={placeholder}
                disabled={disabled}
            />
        </FieldContainer>
    );
};

interface FieldContainerProps {
    title: string;
    children: ReactNode;
    cls?: string;
}

const FieldContainer: FC<FieldContainerProps> = ({ title, cls, children }) => {
    const { errors } = useFormState();

    return (
        <div className={`${styles.inputContainer} ${cls || ''}`}>
            <label htmlFor={title}>{capitalise(title)}:</label>
            {children}
            {errors?.[title] && <span className={styles.required}>{errors?.[title]?.message}</span>}
        </div>
    );
};

謝謝。

uj5u.com熱心網友回復：

它與 react-hook-form 無關。您會收到該錯誤，因為它<Tag />被輸入為字串。所以 TypeScript 不知道它是一個 react 元素。

這是您的代碼的作業示例：https : //codesandbox.io/s/frosty-bird-uxrb6?file=/src/App.tsx

標籤：反应 打字稿 反应钩形

上一篇：什么是typescriptVue3中的echart型別

下一篇：如何從Firestore7.24.0實體查詢具有多個where子句的資料？