Reactjs AntDesign TimePicker作为物料UI中的输入组件

我正在尝试将ant design TimePicker（）与构建平台其余部分所用的Material UI集成。 在与第三方LIB集成时，我将遵循此指南（）。但是我得到了这个错误

未捕获错误：物料UI:预期的有效输入目标。你用过吗 自定义的

输入组件
并忘记转发引用

我认为错误在于ant design TimePicker不满足输入组件所需的接口。另一个问题是

“提供的输入组件应处理inputRef属性
属性应使用实现以下操作的值调用
接口：“

但我不知道如何做到这一点，因此，如果您能为整合这两个库提供帮助，我将不胜感激

import React, { ReactElement } from 'react'
import { Moment } from 'moment'
import 'antd/dist/antd.css'
import { FormControl, InputLabel, FormHelperText, OutlinedInput } from '@material-ui/core'
import * as S from './styled'

export interface Props {
  id: string
  defaultValue: Moment
  displayFormat: string
  disabledHours: () => number[]
  onChange?: (value) => void
}

interface CustomProps extends Props {
  // inputRef: (ref: HTMLInputElement | null) => void
  inputRef: (ref: any | null) => void
}

function TimePickerCustom(props: CustomProps): ReactElement {
  const { inputRef, defaultValue, displayFormat, disabledHours, onChange, ...other } = props

  return (
    <S.TimePicker
      {...other}
      defaultValue={defaultValue}
      format={displayFormat}
      disabledHours={disabledHours}
      showNow={false}
      bordered={false}
      onChange={onChange}
      hideDisabledOptions
      ref={(ref: any) => {
        inputRef(ref ? ref.inputElement : null)
      }}
    />
  )
}

export default function HourMinPicker({ id }: Props): ReactElement {
  return (
    <FormControl variant="outlined">
      <InputLabel variant="outlined" htmlFor={id}>
        Duration
      </InputLabel>
      <OutlinedInput
        id={id}
        aria-describedby={`${id}-helper-text`}
        inputComponent={TimePickerCustom as any}
      />
      <FormHelperText id={`${id}-helper-text`}>Use format HH:mm, ex 12:45</FormHelperText>
    </FormControl>
  )
}

import React，{ReactElement}来自“React”
从“时刻”导入{Moment}
导入“antd/dist/antd.css”
从“@material ui/core”导入{FormControl，InputLabel，FormHelperText，OutlinedInput}
从“./styled”导入*作为
导出接口道具{
id:字符串
默认值：时刻
显示格式：字符串
禁用时间：（）=>number[]
onChange？：（值）=>void
}
界面CustomProps扩展了Props{
//inputRef：（ref:HTMLInputElement | null）=>void
inputRef：（ref:any | null）=>void
}
函数TimePickerCustom（props:CustomProps）：ReactElement{
const{inputRef，defaultValue，displayFormat，disabledHours，onChange，…other}=props
返回(
{
inputRef（ref？ref.inputElement:null）
}}
/>
)
}
导出默认函数HourMinPicker（{id}:Props）：ReactElement{
返回(
期间
使用格式HH:mm，ex12:45
)
}

import React, { ReactElement } from 'react'
import { Moment } from 'moment'
import 'antd/dist/antd.css'
import { FormControl, InputLabel, FormHelperText, OutlinedInput } from '@material-ui/core'
import * as S from './styled'

export interface Props {
  id: string
  defaultValue: Moment
  displayFormat: string
  disabledHours: () => number[]
  onChange?: (value) => void
}

interface CustomProps extends Props {
  // inputRef: (ref: HTMLInputElement | null) => void
  inputRef: (ref: any | null) => void
}

function TimePickerCustom(props: CustomProps): ReactElement {
  const { inputRef, defaultValue, displayFormat, disabledHours, onChange, ...other } = props

  return (
    <S.TimePicker
      {...other}
      defaultValue={defaultValue}
      format={displayFormat}
      disabledHours={disabledHours}
      showNow={false}
      bordered={false}
      onChange={onChange}
      hideDisabledOptions
      ref={(ref: any) => {
        inputRef(ref ? ref.inputElement : null)
      }}
    />
  )
}

export default function HourMinPicker({ id }: Props): ReactElement {
  return (
    <FormControl variant="outlined">
      <InputLabel variant="outlined" htmlFor={id}>
        Duration
      </InputLabel>
      <OutlinedInput
        id={id}
        aria-describedby={`${id}-helper-text`}
        inputComponent={TimePickerCustom as any}
      />
      <FormHelperText id={`${id}-helper-text`}>Use format HH:mm, ex 12:45</FormHelperText>
    </FormControl>
  )
}