Reactjs 带类型脚本的MUIv4升级-无法将道具正确传播到文本字段

当前物料界面版本：

4.1.0

我在向我创建的抽象的

组件传播道具时遇到问题

代码如下：

PasswordInput.tsx

import * as React from 'react'
import TextField, { Props as TextFieldProps } from 'src/TextField'

type Props = TextFieldProps & {
  hideHelperText?: boolean;
};

class PasswordInput extends React.Component<Props> {
  onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    /** do stuff */
  };

  render() {
    const {
      hideHelperText,
      classes,
      ...rest
    } = this.props;

    return (
      <React.Fragment>
        <TextField
          /** errors out here */
          /*
            Type 'HideShowText | null' is not assignable to type 'HTMLDivElement | null'.
            Type 'HideShowText' is missing the following properties from type 'HTMLDivElement':
            align, addEventListener, removeEventListener, accessKey, and 238 more
          */
          {...rest}
          onChange={this.onChange}
        />
        {!hideHelperText && 'hello world'}
      </React.Fragment>
    );
  }
}

export default PasswordInput;

import TextField, {
  StandardTextFieldProps as TextFieldProps
} from '@material-ui/core/TextField';

type ClassNames =
  | 'root'

const styles = (theme: Theme) =>
  createStyles({
    root: {},
  });

interface BaseProps {
  tooltipText?: string;
  dataAttrs?: Record<string, any>
}

export type Props = BaseProps & TextFieldProps

type CombinedProps = Props &
  WithStyles<ClassNames>;

class MyTextField extends React.Component<CombinedProps> {
  render() {
    const {
      children,
      tooltipText,
      dataAttrs,
      /** everything else that goes on the root */
      ...textFieldProps
    } = this.props;

    return (
      <div
      >
        <TextField
          {...textFieldProps}
          {...dataAttrs}
        >
          {this.props.children}
        </TextField>
        {tooltipText && <HelpIcon text={tooltipText} />}
      </div>
    );
  }
}

const styled = withStyles(styles);

export default compose<CombinedProps, Props>(
  styled
)(MyTextField);

它的爆炸错误如下：

TS2322: Type '{ tooltipText: string | undefined; value: string | undefined; onChange: (e: ChangeEvent<HTMLInputElement>) => void; fullWidth: true; required: boolean | undefined; errorText?: string | undefined; ... 282 more ...; innerRef?: ((instance: any) => void) | ... 2 more ... | undefined; }' is not assignable to type 'IntrinsicClassAttributes<HideShowText>'.
  Types of property 'ref' are incompatible.
    Type '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined' is not assignable to type 'string | ((instance: HideShowText | null) => void) | RefObject<HideShowText> | null | undefined'.
      Type '(instance: HTMLDivElement | null) => void' is not assignable to type 'string | ((instance: HideShowText | null) => void) | RefObject<HideShowText> | null | undefined'.
        Type '(instance: HTMLDivElement | null) => void' is not assignable to type '(instance: HideShowText | null) => void'.
          Types of parameters 'instance' and 'instance' are incompatible.
            Type 'PasswordInput | null' is not assignable to type 'HTMLDivElement | null'.
              Type 'PasswordInput' is missing the following properties from type 'HTMLDivElement': align, addEventListener, removeEventListener, accessKey, and 238 more.

TS2322:Type'{tooltipText:string|undefined；value:string|undefined；onChange:（e:changeent）=>void；fullWidth:true；required:boolean | undefined；errorText？：string | undefined；282 more…；innerRef？：（（实例：any）=>void）|…2 more…| undefined；}不可分配给类型“IntrinsicClassAttributes”。
属性“ref”的类型不兼容。
类型“（（实例：HTMLDivElement | null）=>void）|重新对象| null |未定义”不可分配给类型“string |”（（实例：HideShowText | null）=>void）|重新对象| null |未定义”。
类型“（实例：HTMLDivElement | null）=>void”不可分配给类型“string |”（（实例：HideShowText | null）=>void）|重新对象| null |未定义”。
Type'（实例：htmldevelment | null）=>void'不可分配给Type'（实例：HideShowText | null）=>void'。
参数“instance”和“instance”的类型不兼容。
类型“PasswordInput | null”不可分配给类型“HtmlLevel | null”。
类型“PasswordInput”缺少类型“HtmlDiscovery”中的以下属性：align、addEventListener、removeEventListener、accessKey和其他属性。

密码输入中的

…rest

似乎应该等于

标准文本字段属性

，但由于某种原因，我的组件不是

HTMLLevel

，因此出现了错误

---

如果我能提供更多细节，请告诉我。据我所知，这是一个错误。

我昨天遇到了这个错误。我在其他地方使用相同的类型联合，例如使用

SelectProps

，没有问题，但是

TextFieldProps

在多个属性上有问题，而

StandardTextFieldProps

仅在

ref

上有问题。因此，作为临时措施，您可以声明：

export type MyTextFieldProps = Omit< StandardTextFieldProps, 'ref' > & { ... }

export type MyTextFieldProps=Omit&{…}

我昨天遇到了这个错误。我在其他地方使用相同的类型联合，例如使用

SelectProps

，没有问题，但是

TextFieldProps

在多个属性上有问题，而

StandardTextFieldProps

仅在

ref

上有问题。因此，作为临时措施，您可以声明：

export type MyTextFieldProps = Omit< StandardTextFieldProps, 'ref' > & { ... }

export type MyTextFieldProps=Omit&{…}

@flatline。谢谢你的建议。我还有一个有效的解决方案，可以改变导出的类型。老实说，我不太清楚为什么会这样，但确实如此。记下每个文件中的最后几行：

TextField.tsx

import*作为来自“React”的React
从'src/TextField'导入TextField，{Props as TextFieldProps}
键入Props=TextFieldProps&{
hideHelperText？：布尔值；
};
类PasswordInput扩展了React.Component{
onChange=（e:React.ChangeEvent）=>{
/**做事*/
};
render（）{
常数{
隐藏的文本，
班级，
休息
}=这是道具；
返回(
{！hideHelperText&&“你好，世界”}
);
}
}
将默认密码输入导出为React.ComponentType；；

@flatline。谢谢你的建议。我还有一个有效的解决方案，可以改变导出的类型。老实说，我不太清楚为什么会这样，但确实如此。记下每个文件中的最后几行：

TextField.tsx

import*作为来自“React”的React
从'src/TextField'导入TextField，{Props as TextFieldProps}
键入Props=TextFieldProps&{
hideHelperText？：布尔值；
};
类PasswordInput扩展了React.Component{
onChange=（e:React.ChangeEvent）=>{
/**做事*/
};
render（）{
常数{
隐藏的文本，
班级，
休息
}=这是道具；
返回(
{！hideHelperText&&“你好，世界”}
);
}
}
将默认密码输入导出为React.ComponentType；；

import * as React from 'react'
import TextField, { Props as TextFieldProps } from 'src/TextField'

type Props = TextFieldProps & {
  hideHelperText?: boolean;
};

class PasswordInput extends React.Component<Props> {
  onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    /** do stuff */
  };

  render() {
    const {
      hideHelperText,
      classes,
      ...rest
    } = this.props;

    return (
      <React.Fragment>
        <TextField
          /** errors out here */
          /*
            Type 'HideShowText | null' is not assignable to type 'HTMLDivElement | null'.
            Type 'HideShowText' is missing the following properties from type 'HTMLDivElement':
            align, addEventListener, removeEventListener, accessKey, and 238 more
          */
          {...rest}
          onChange={this.onChange}
        />
        {!hideHelperText && 'hello world'}
      </React.Fragment>
    );
  }
}

export default PasswordInput as React.ComponentType<Props>;;