使用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>
  );
};