得到了'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 導入了它。