如何解决使用react-widgets在DateTimePicker组件上显示错误
我有一个使用我正在构建的react-widgets的简单可重用的DateTimePicker组件。它虽然可以说是非常基本的,但是我不知道为什么它会引发此错误,即使我已经将DateTimePicker内的其他属性都容纳进去了,并且分散在DateTimePicker道具中。
错误是这样,看起来道具没有散布在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
。
但是,根据您的情况,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>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。