使用 react-widgets 在 DateTimePicker 组件上出现道具错误

Question

我有这个简单的可重复使用的 DateTimePicker 组件，它使用我正在构建的 react-widgets。它非常基本，但我不知道为什么它会抛出此错误，尽管我已经在 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>
  );
};

知道我做错了什么吗？

Answer 1

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

使用 react-widgets 在 DateTimePicker 组件上出现道具错误

Props error on DateTimePicker component using react-widgets

typescript

reactjs

react-final-form

react-widgets