Машинопись | Typescript отсутствует 27 реквизитов при расширении formikProps на IProps
Я использую Formik с TypeScript и хочу использовать очень простой компонент формы в TS внутри другого компонента, из которого я беру defaultValues и validationSchemas.
Сложная часть заключается в том, как получить доступ только к нужным formikProps и не получить следующую ошибку:
Type '{}' is missing the following properties from type 'Readonly<IProps>': values, errors, touched, isValidating, and 25 more.ts(2740)
(alias) class PasswordFields
import PasswordFields
Вот код компонента:
interface IProps extends FormikProps<IValues> {
username?: string;
email?: string;
}
interface IValues {
username?: string;
email?: string;
}
И в основном компоненте я называю это так:
render(): ReactNode {
const { mode } = this.props;
return (
<Formik
initialValues = {this.getInitialValues()}
validationSchema = {this.getValidationSchemas()}
onSubmit = {this.handleSubmit}
validateOnBlur = {false}
render = {({ isSubmitting, status }) =>
(
<Form>
{mode === ActionMode.EDIT_INFO && (
<Fragment>
<InfoFields /> // I am getting the error here..
<GroupSelectField />
</Fragment>
)}
<Button
className = "btn btn-primary w-100 mt-5"
disabled = {isSubmitting}
loading = {isSubmitting}
type = "submit"
>
{mode === ActionMode.EDIT_INFO && <span>UPDATE INFO</span>}
</Button>
</Form>
) as ReactNode
}
/>
);
}
Я своего рода стек на этом. Не могли бы вы сказать мне, как получить доступ только к нужным мне formikProps, чтобы ТС не жаловался.?? А еще у меня есть другая проблема. Как передать реквизит из компонента в формы формика.
Ответы 1
Как и в случае твой другой вопрос с той же проблемой, InfoFields ожидает реквизиты, которые вы не передаете:
<Formik
render = {formikProps => (
<Form>
// Other Code.
<InfoFields {...formikProps} />
// Other Code.
</Form>
)}
/>
Could you tell me how to access only the formikProps that I want, so TS, doesn't complain
Вместо вышеперечисленного вы можете выбрать нужные реквизиты из FormikProps и передать их в InfoFields. Например что-то вроде этого:
const InfoFields = ({ errors, touched }: Pick<FormikProps<IValues>, 'errors' | 'touched'>) => (
<div>
// Whatever.
</div>
);
... и отображается в родительском компоненте следующим образом:
<Formik
render = {({ errors, touched }) => (
<Form>
// Other Code.
<InfoFields errors = {errors} touched = {touched} />
// Other Code.
</Form>
)}
/>
Это на самом деле очень полезно. Спасибо. В итоге вместо этого сделал компонент в
.jsx. Но с этим я могу преобразовать их в.tsx. Спасибо большое.