reactjs - 使用 react-widgets 在 DateTimePicker 组件上出现道具错误
问题描述
我使用我正在构建的 react-widgets 有这个简单的可重用 DateTimePicker 组件。它尽可能基本,但我不知道为什么它会引发此错误,即使我已经在 DateTimePicker 中容纳了其余属性并且已经在 DateTimePicker 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
prop 的类型为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>
);
};
推荐阅读
- php - 安全地设置 GOOGLE_APPLICATION_CREDENTIALS
- docker - Apache kafka 无效接收大小
- vue.js - 在浏览器上单击后退按钮后如何在 Vue 中重置状态
- zsh - zsh中“bat”的选项卡完成时“找不到命令”
- symfony - 在 Symfony 3.2 中运行控制台命令
- selenium - 硒点击非常感谢
- dialogflow-es - 在 Google Actions 的情况下,Transaction API 不起作用
- spring-mvc - 在对休息控制器执行测试时在 spock 测试用例中出错
- javascript - Redux observable 不处理后端响应
- oracle - 除了状态行,不显示 Oracle Forms 消息