得到了'DatePickerProps<unknown> ': onChange, value, renderInput' 尝试使用 MUI 和 react-hook-form 创建自定义组件时</unknown>

Question

我正在尝试使用 MUI Datepicker 和 React Hook Form 制作可重用组件

但是得到了Type '{ control: Control<FieldValues, object>; name: string; }' is missing the following properties from type 'DatePickerProps<unknown>': onChange, value, renderInput ts(2739) Type '{ control: Control<FieldValues, object>; name: string; }' is missing the following properties from type 'DatePickerProps<unknown>': onChange, value, renderInput ts(2739) Type '{ control: Control<FieldValues, object>; name: string; }' is missing the following properties from type 'DatePickerProps<unknown>': onChange, value, renderInput ts(2739)

我现在卡住了：

import { DatePickerProps } from "@mui/lab";
import { ComponentProps } from "react";

import { Control, Controller } from "react-hook-form";

import DateInputComponent from "./DateInputComponent";

type Props = {
  name: string;
  control: Control;
  errors?: {
    [x: string]: any;
  };
  rules?: any;
  defaultValue?: any;
} & ComponentProps<typeof DateInputComponent>;

type ExtendedProps = Props & DatePickerProps;

const ControlledDateInput = ({
  name,
  control,
  errors,
  rules,
  defaultValue,
  ...props
}: ExtendedProps) => {
  return (
    <Controller
      control={control}
      name={name}
      rules={rules}
      defaultValue={defaultValue}
      render={({ field: { onChange, onBlur, value } }) => (
        <DateInputComponent
          {...props}
          onChange={onChange}
          onBlur={onBlur}
          value={value}
          error={!!errors?.[name]}
          helperText={
            errors?.[name] ? errors?.[name]?.message || "Invalid field" : ""
          }
        />
      )}
    />
  );
};

export default ControlledDateInput;

go 这个沙箱更好： https://codesandbox.io/s/affectionate-drake-5bjbl?file=/src/App.tsx

请帮忙！！！

Answer 1

DatePickerProps类型采用 2 generics。 （在您发布问题时，它只需要一个。）您需要调用DatePickerProps<unknown, unknown>或DatePickerProps<Date, Date>等类型。

Answer 2

在我的例子中， @mui/lab的DatePickerProps没有声明正确的类型。 当我使用 x-date-pickers package 渲染到我的自定义组件时，我从@mui/x-date-pickers pickers 导入了它。