type＆＃x27; refobject＆lt; htmldivelement＆gt;＆＃x27;不能分配给类型＆＃x27; refobject＆lt; htmlinputelement＆gt;＆＃x27;

Question

我收到此错误：

Type '{ placeholder: string | undefined; autoComplete: string | undefined; "data-testid": string | undefined; onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined; ... 282 more ...; css?: InterpolationWithTheme<...>; } | { ...; } | { ...; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Type '{ placeholder: string | undefined; autoComplete: string | undefined; "data-testid": string | undefined; onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined; ... 282 more ...; css?: InterpolationWithTheme<...>; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
    Type '{ placeholder: string | undefined; autoComplete: string | undefined; "data-testid": string | undefined; onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined; ... 282 more ...; css?: InterpolationWithTheme<...>; }' is not assignable to type 'ClassAttributes<HTMLInputElement>'.
      Types of property 'ref' are incompatible.
        Type '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
          Type 'RefObject<HTMLDivElement>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
            Type 'RefObject<HTMLDivElement>' is not assignable to type 'RefObject<HTMLInputElement>'.
              Type 'HTMLDivElement' is missing the following properties from type 'HTMLInputElement': accept, alt, autocomplete, capture, and 51 more.ts(2322)

在这段代码中：

import _ from 'lodash'
import { TextFieldProps } from '@mui/material/TextField/TextField'
...
_renderSimple (sharedProps: TextFieldProps): JSX.Element {
  const inputProps = _.omit(sharedProps, ['className', 'hintText', 'InputProps'])
  return (
    <div className={sharedProps.className}>
      <input
        {...inputProps}
        placeholder={sharedProps.placeholder}
        autoComplete={this.props.autoComplete}
        data-testid={this.props.dataTestId}
      />
      {this._renderError()}
    </div>
  )
}

我认为这没有意义，因为我将 inputProps 放在 input 中，而不是 div.我缺少什么？

Answer 1

类型不相同，您正在尝试在普通输入上使用material-ui类型。

标准输入'React.DetailedHTMLProps'和material-ui TextFieldProps 是单独的类型定义。

您可以通过执行以下操作来强制执行此操作，但请注意，您可能会产生意想不到的副作用

const inputProps = _.omit(sharedProps, ['className', 'hintText', 'InputProps']) as unknown as React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>