typescript React中的错误:泛型类型“DatePickerProps”需要1个类型参数

eyh26e7m  于 2023-11-20  发布在  TypeScript
关注(0)|答案(4)|浏览(167)

DatePicker组件:

import React from "react"
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import { LocalizationProvider } from '@mui/lab';
import { DatePicker, DatePickerProps } from '@mui/lab';

const FormikDatePicker: React.FunctionComponent<DatePickerProps> = ({
    ...rest
}) => {
    return (
        <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DatePicker
                {...rest}
            />
        </LocalizationProvider>
    )
}

export default FormikDatePicker

字符串
FormikDatePicker组件:

import React from "react"
import { FormHelperText } from "@mui/material"
import { useFormikContext } from "formik"
import { getFormikInputParams } from "../../../utils/getFormikInputParams"
import DatePicker from "./DatePicker"
import { FormikIdentifier } from "../../../types/formik"
import { DatePickerProps } from "@mui/lab"

type Props = Omit<
    DatePickerProps,
    "onChange" | "value" | "id" | "name"
> &
    FormikIdentifier

const FormikDatePicker: React.FunctionComponent<Props> = ({ ...rest }) => {
    const formik = useFormikContext()
    const id = rest.id || rest.name || ""
    const { error, showError, value } = getFormikInputParams(formik, id)

    return (
        <>
            <DatePicker
                inputFormat="yyyy/MM/dd"
                value={value}
                onChange={(date) => formik.setFieldValue(id, date)}
                onClose={() => formik.setFieldTouched(id)}
                {...rest}
            />
            {showError && <FormHelperText error>{error}</FormHelperText>}
        </>
    )
}

export default FormikDatePicker


问题:


的数据
代码工作正常,但更新后的材料UI版本5,我收到上述错误,我不知道如何解决它.如果你能帮助这将是伟大的,谢谢.
DatePickerProps是如何定义的:

import * as React from 'react';
declare type DatePickerComponent = (<TDate>(props: DatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
    propTypes?: any;
};
/**
 * @ignore - do not document.
 */
declare const DatePicker: DatePickerComponent;
export default DatePicker;
export declare type DatePickerProps<TDate> = Record<any, any>;

gcuhipw9

gcuhipw91#

答案在错误中。DatePickerProps是一个泛型类型,需要你定义一个。例如,你的props可能看起来像这样:

type Props<T> = Omit<
    DatePickerProps<T>,
    "onChange" | "value" | "id" | "name"
> &
    FormikIdentifier

字符串
如果DatePickerProps泛型需要对泛型进行一些约束,那么您也需要将这些约束添加到Props泛型中。

6tr1vspr

6tr1vspr2#

通过查看源代码,我无法弄清楚泛型应该是什么类型。我假设是日期。实际上有两个泛型:

export interface DatePickerProps<TInputDate, TDate> extends ...

字符串
也许这不是最好的答案,但这对我来说没有任何类型错误:

type MergedProps = SpotlightIntegrationProps &
  SelectProps &
  DatePickerProps<Date, Date>;

6rqinv9w

6rqinv9w3#

我让戴耶斯参与辩论,解决了这个问题。

interface ICalenderProps extends DatePickerProps<Dayjs>

字符串

gwbalxhn

gwbalxhn4#

我今天遇到了这个问题,并通过从mui/x-date-pickers导入我的日期选择器和本地化提供程序来修复它。显然,来自mui/lab的日期选择器已被弃用。This is a link about migration from lab to x-pickersthis is mui x docs

相关问题