reactjs - Egenskapen finns inte på typen 'IntrinsicAttributes' med useFormContext och anpassad tagg

Nyligen ändrade jag mina anpassade inmatningskomponenter för att använda react useFormContext istället för att skicka errors och register komponenter till dem via props. Sedan dess stöter jag på detta irriterande typescript-fel:

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

Ta den här delen av koden:

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

Det visar felet endast under defaultValue, men om jag tar bort det, bestämmer det sig då för att visa det under placeholder, och så vidare om det tas bort.

Jag har också märkt att problemet löses ofullständigt genom att ändra Tag till input, vilket inte är bra eftersom jag då inte kan använda komponenten för till exempel textarea-fält. Den fungerade bokstavligen tidigare och jag har bara ändrat den för att använda formulärkontekst, så jag har ingen aning om varför den inte skulle gilla det.

Har någon några idéer om varför detta problem uppstår? Den relevanta delen av formuläret:

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

Komponenten:

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

Tack.

Svar #1

Det är inte relaterat till react-hook-form. Du får det felet eftersom <Tag /> är typad som en sträng. Så TypeScript vet inte att det är ett React-element.

Här är ett fungerande exempel på din kod: https://codesandbox.io/s/frosty-bird-uxrb6?file=/src/App.tsx

Relaterade artiklar