reactjs - Proprietatea nu există pe tipul 'IntrinsicAttributes' cu useFormContext și etichetă personalizată

Recent, am schimbat componentele mele personalizate de input pentru a folosi react useFormContext în loc să trec componentele errors și register către ele prin props. De când am făcut asta, mă confrunt cu această eroare enervantă de TypeScript:

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

Ia această parte a codului:

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

Arată eroarea doar sub defaultValue, dar dacă o elimin, atunci decide să o arate sub placeholder, și tot așa dacă acesta este eliminat.

De asemenea, am observat că problema este rezolvată imperfect prin schimbarea Tag în input, ceea ce nu este bine pentru că atunci nu pot folosi componenta, de exemplu, pentru câmpuri textarea. Mergea literar înainte și am schimbat-o doar să folosească contextul formularului, așa că nu am idee de ce nu ar funcționa așa.

Are cineva idei despre de ce apare această problemă? Partea relevantă a formularului:

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' />
                        ...

Componenta:

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>
    );
};

Mulțumesc.

Răspuns #1

Nu are legătură cu react-hook-form. Primești acea eroare pentru că <Tag /> este tastat ca un șir. Deci TypeScript nu știe că este un element React.

Iată un exemplu funcțional al codului tău: https://codesandbox.io/s/frosty-bird-uxrb6?file=/src/App.tsx