Я создаю простую веб-страницу на React + TS с библиотекой дизайна ant, и у меня проблема с типами в компоненте формы. Я создал массив для отображения через них и рендеринга формы.
https://codesandbox.io/s/relaxed-mountain-vb1b0e?from-embed
Это выглядит как элемент массива, который дает мне ошибку.
const FormItems = [
// {
// name: 'name',
// label: 'Imię/ firma',
// rules: { required: true }, <----- this element is good
// inputType: <Input />,
// },
{
name: 'email',
label: 'Email',
rules: { type: 'email', required: true }, <---- this element giving an error
inputType: <Input />,
},
];
ОШИБКА / / /
Type '{ type: string; required: boolean; }' is not assignable to type 'Rule'.
Type '{ type: string; required: boolean; }' is not assignable to type 'ArrayRule'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"array"'.ts(2322)
И эта ошибка возникает в этом фрагменте кода:
{FormItems.map((item) => (
<Form.Item
name = {['user', item.name]}
label = {item.label}
rules = {[item.rules]} <--- item.rules are underlined
>
{item.inputType}
</Form.Item>
))}
Проп ожидает значение string
, а не значение boolean
, обратитесь к документации здесь и здесь , однако я не могу воспроизвести эту ошибку, если возможно, попробуйте воспроизвести ее на codeandbox.io или аналогичный сервис.
{
name: "email",
label: "Email",
rules: {
type: 'boolean',
required: true
},
inputType: <Input />
}
О да, конечно, нужна веревка. Это было для целей тестирования. Отредактировал пост об этом и добавил песочницу codeandbox.io/s/relaxed-mountain-vb1b0e?from-embed
Antd предоставляет определение типа реквизитов правил. Вы можете импортировать его следующим образом:
import { Rule } from 'antd/es/form';
Теперь вы можете определить тип вашего списка FormItems следующим образом:
import { Rule } from 'antd/es/form';
import { ReactNode } from 'react';
type FormItemsListType = {
name: string;
label: string;
rules: Rule[];
inputType: ReactNode;
};
const FormItems: FormItemsListType[] = [
{
name: 'email',
label: 'Email',
rules: [{ type: 'boolean', required: true }],
inputType: <Input />
}
];
Form.Item — это просто оболочка для npmjs.com/package/rc-field-form#rule.