Блог

Привет, у меня есть две формы, которые отличаются только одним полем. Итак, я подумываю о создании общего компонента формы и передаче только дополнительного поля в качестве необязательного свойства.

Общая форма:

 import { Form as ReactFinalForm, Field } from "react-final-form";
import Form from 'react-bootstrap/Form';

interface CommonFormProps {
    onSubmit: (values: any) => void;
    extraFields?: typeof Field[];
}

export default function CommonForm(props: CommonFormProps) {
    return (
          <ReactFinalForm
            onSubmit={values => {
              props.onSubmit(values);
            }}
            render={({ handleSubmit, form, submitting, pristine, values}) => (
              <Form onSubmit={handleSubmit}>
                   // other fields
                 {props.extraFields}
              </Form>
            )}
          />
    );
}
  

Форма, требующая дополнительного поля

 export default function FormB() {
    return (
        <CommonForm
          extraFields={<Field name="price" validate={required} >
                         {({ input, meta }) => (
              <Form.Group as={Form.Row} controlId="price">
                <Form.Label column sm={4}>
                    Price
                </Form.Label>
                <Col sm={8}>
                  <Form.Control type="text" {...input} />
                </Col>
              </Form.Group>
            )}
          </Field>}
      />
);
}
  

Я попытался определить дополнительные поля как typeof Field[] или typeof Field . Это не имеет никакого значения, и ошибка всегда

Тип ‘Element’ не может быть присвоен типу ‘<Значение поля = любое, RP расширяет FieldRenderProps<Значение поля, T> = FieldRenderProps<Значение поля, HTMLElement>, T расширяет HTMLElement = HTMLElement>(реквизит: FieldProps<…>) => ReactElement<…>’. Тип ‘Element’ не соответствует сигнатуре ‘<Значение поля = любое, RP расширяет FieldRenderProps<Значение поля, T> = FieldRenderProps<Значение поля, HTMLElement>, T расширяет HTMLElement = HTMLElement>(реквизит: FieldProps<…>): ReactElement<…>’.ts(2322) index.tsx(16, 5): ожидаемый тип приходит из

Кто-нибудь может помочь избавиться от этого, пожалуйста?

Передается как дочерний элемент, а не как реквизит:

 export default function FormB() {
    return (
        <CommonForm>
          <Field name="price" validate={required} >
                         {({ input, meta }) => (
              <Form.Group as={Form.Row} controlId="price">
                <Form.Label column sm={4}>
                    Price
                </Form.Label>
                <Col sm={8}>
                  <Form.Control type="text" {...input} />
                </Col>
              </Form.Group>
            )}
          </Field>}
      </CommonForm>);
}
  

Затем используйте дочерние элементы

 export default function CommonForm(props: CommonFormProps) {
    return (
          <ReactFinalForm
            onSubmit={values => {
              props.onSubmit(values);
            }}
            render={({ handleSubmit, form, submitting, pristine, values}) => (
              <Form onSubmit={handleSubmit}>
                   // other fields
                 {props.children}
              </Form>
            )}
          />
    );
}
  

дочерние элементы могут быть пустыми