reactjs - Hata: '{ children: Element[]; }' türünün 'IntrinsicAttributes & RefAttributes' türü ile ortak özelliği yok

React uygulamamda Formik kullanmaya çalışıyorum. Giriş bileşenini ts ile yazdım. Bir sebepten dolayı, Formik içindeki Form elementi aşağıdaki hatayı veriyor:

Hata TS2559 (TS) Tür '{ children: Element[]; }' tipi, 'IntrinsicAttributes & RefAttributes' tipi ile ortak özelliğe sahip değil.

Bu sorunu nasıl hafifletebileceğimi merak ediyorum. Herhangi bir çözüm var mı?

 <div>
            <Form></Form> // NO ERROR
            <h4>Login</h4>
            <Formik
                initialValues={{
                    username: '',
                    password: ''
                }}
                validationSchema={Yup.object().shape({
                    username: Yup.string().required('Username is required'),
                    password: Yup.string().required('Password is required')
                })}
                onSubmit={({ username, password }, { setStatus, setSubmitting }) => {
                    setStatus();
                    authenticationService.login(username, password)
                        .then(
                            result => {
                                console.log(result);
                                console.log(typeof result);

                                if (result.status == '500') {
                                    setSubmitting(false);
                                    setStatus("Login failed.");

                                } else if (result.status == '200') {
                                    if (result.data["roles"].result.includes('Admin'))
                                        history.push('/admin/courses');

                                    history.push('/courses');
                                }
                            },
                            error => {
                                setSubmitting(false);
                                setStatus(error);
                            }
                        );
                }}
                render={({ errors, status, touched, isSubmitting }) => (
                    <Form> // ERROR!!!
                        <div className="form-group">
                            <label htmlFor="username">Username</label>
                            <Field name="username" type="text" className={'form-control' + (errors.username && touched.username ? ' is-invalid' : '')} />
                            <ErrorMessage name="username" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <label htmlFor="password">Password</label>
                            <Field name="password" type="password" className={'form-control' + (errors.password && touched.password ? ' is-invalid' : '')} />
                            <ErrorMessage name="password" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <button type="submit" className="btn btn-primary" disabled={isSubmitting}>Login</button>
                            {isSubmitting && <LoadingSpinner />}
                        </div>
                        {
                            status &&
                            <div className={'alert alert-danger'}>Login failed.</div>
                        }
                    </Form>
                )}
            />

            />

        </div>

Cevap #1

Bu, formik v2 ile ilgili bir sorun gibi görünüyor (21 saat önce yayınlandı), formik'in temiz bir CRA kurulumu ile aynı sorunu yaşıyorum ve tiplerin eksik bırakıldığı görünüyor, bu da <Form />'in çocuklara sahip olmasına izin veriyor.

Şimdilik v1.5.8'e düşürmeyi tavsiye ederim, bunun sorununuzu çözeceğini doğrulayabilirim.

Formik kullanırken ayrıca değer türlerini geçirmeyi de öneririm, bunlar çok kolay bir şekilde fazla tip güvenliği sağlar. Dosyanızın en üstüne type Values={ username: string, password: string } ekleyebilir ve bunu Formik bileşenine <Formik<Values> olarak geçirebilirsiniz.

Cevap #2

Bunu yaşayan başka biri için, en azından Formik v2.0.11 sürümünde ve muhtemelen daha üst sürümlerde hâlâ bir sorun gibi görünüyor.

Benim özel sorunum, Formik'in <Form> bileşeni ile withFormik HOC'unun kullanımıyla ilgiliydi, örneğin:

    const MyForm = (props: Props) => {
        const { things, from, the, hoc } = props;
        // some logic
        return (
            <Form>
              <MyCustomFormElements /> 
            </Form
        );
    }
    
    const FormikForm = withFormik({
      mapPropsToValues: (props: OwnProps): OwnForm => {
        return {
          some: 'custom',
          values: 'and things'
        };
      },
      handleSubmit: (values, { props, setSubmitting }) => {
        props.handleSubmit(values, setSubmitting);
      },
      enableReinitialize: true,
      validateOnBlur: true,
      validateOnChange: true,
      validationSchema: (props: OwnProps) => formSchema(props.t),
    })(MyForm);
    
    export default FormikForm;

withFormik HOC'u için resmi örneğe burada göz attım:

• https://formik.org/docs/api/withFormik

ve hatta örnekte bile kendi <Form /> bileşenlerini kullanmadıklarını fark etti. Çözüm, <Form /> yerine standart html <form> kullanmaktı (ve <form>'e handleSubmit prop'unu geçirmeyi unutmayın, bu görünüşe göre bu durumda Formik'in <Form /> bileşeninin yapamadığı şeydir):

    const MyForm = (props: Props) => {
        // notice the explicit use of handleSubmit!!
        const { things, from, the, hoc, handleSubmit } = props;
        // some logic
        return (
            <form onSubmit={handleSubmit}>
              <MyCustomFormElements /> 
            </form>
        );
    }
    
    const FormikForm = withFormik({
      mapPropsToValues: (props: OwnProps): OwnForm => {
        return {
          some: 'custom',
          values: 'and things'
        };
      },
      handleSubmit: (values, { props, setSubmitting }) => {
        props.handleSubmit(values, setSubmitting);
      },
      enableReinitialize: true,
      validateOnBlur: true,
      validateOnChange: true,
      validationSchema: (props: OwnProps) => formSchema(props.t),
    })(MyForm);
    
    export default FormikForm;