我有一个简单的可重用 DateTimePicker 组件,使用我正在构建的 react 小部件。它非常基本,但我不知道为什么它会抛出此错误,尽管我已将其余属性容纳在 DateTimePicker 中并分布在 DateTimePicker Props 中。
错误是这样的,看起来 props 没有分布在 DateTimePicker 上
Type '{ as?: any; children?: ReactNode; className?: string | undefined; content?: ReactNode; control?: any; disabled?: boolean | undefined; id?: string | number | undefined; ... 6 more ...; onChange: (event: any) => void; }' is not assignable to type 'Readonly<DateTimePickerProps>'.
Types of property 'id' are incompatible.
Type 'string | number | undefined' is not assignable to type 'string | undefined'.
Type 'number' is not assignable to type 'string | undefined'.
下面是我的DateInput.tsx的代码
import React from "react";
import { FieldRenderProps } from "react-final-form";
import { FormFieldProps, Form, Label } from "semantic-ui-react";
import { DateTimePicker } from "react-widgets";
interface IProps extends FieldRenderProps<Date, HTMLElement>, FormFieldProps {}
const DateInput: React.FC<IProps> = ({
input,
width,
placeholder,
meta: touched,
error,
...props
}) => {
return (
<Form.Field error={touched && !!error} width={width}>
<DateTimePicker
placeholder={placeholder}
value={input.value || null}
onChange={input.onChange}
{...props}
/>
{touched && error && (
<Label basic color="red">
{error}
</Label>
)}
</Form.Field>
);
};
知道我做错了什么吗?
最佳答案
react-widgets
预计id
类型为 string | undefined
的 prop 。
但是,在您的情况下, id
的类型是 string | number | undefined
.
一种可能的解决方案是将 id
转换为prop 到字符串并将其传递给 DateTimePicker 组件:
const DateInput: React.FC<IProps> = ({
input,
width,
placeholder,
meta: touched,
error,
id,
...props
}) => {
return (
<Form.Field error={touched && !!error} width={width}>
<DateTimePicker
id={String(id)}
placeholder={placeholder}
value={input.value || null}
onChange={input.onChange}
{...props}
/>
{touched && error && (
<Label basic color="red">
{error}
</Label>
)}
</Form.Field>
);
};
关于reactjs - 使用react-widgets 在 DateTimePicker 组件上出现 Props 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63893749/