Question

为什么类型typeof LogoAvatar的参数不能分配给类型ComponentType<LogoProps & Partial<WithTheme>的参数

代码：

import * as React from "react";

import { withStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";

const styles = {
 avatar: {
  margin: 10
  }
 };

interface LogoProps {
  lender: string;
  src: string;
 }

class LogoAvatar extends React.Component<LogoProps> {
  render(): JSX.Element {
    let l = this.props.lender;
    let s = this.props.src;

if (l === "Seacoast") {
  s =
    "https://www.seacoastbank.com/hs-fs/hubfs/Seacoast-Dark-Logo-compressor.png?t=1532980735522&width=472&name=Seacoast-Dark-Logo-compressor.png";
}

if (l === "nbkc") {
  s = "http://measuremedia.com/img/nbkclogo.jpg";
}

return <Avatar src={s} className="avatar" />;
  }
}
export default withStyles(styles)(LogoAvatar);

错误消息：

Argument of type 'typeof LogoAvatar' is not assignable to parameter of type 'ComponentType<LogoProps & Partial<WithTheme> & { classes: Record<"row" | "avatar", string>; }>'.
  Type 'typeof LogoAvatar' is not assignable to type 'StatelessComponent<LogoProps & Partial<WithTheme> & { classes: Record<"row" | "avatar", string>; }>'.
    Type 'typeof LogoAvatar' provides no match for the signature '(props: LogoProps & Partial<WithTheme> & { classes: Record<"row" | "avatar", string>; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

Answer 1

您应该检查Typescript中的styles限制

https://material-ui.com/guides/typescript/#decorating-components

由于TS的限制，您应该使用函数方法代替此方法。

Answer 2

这为我编译：

import * as React from "react";

import { withStyles, WithStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";

const styles = {
 avatar: {
  margin: 10
  }
 };

interface LogoProps extends WithStyles<typeof styles> {
//                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  lender: string;
  src: string;
 }

class LogoAvatar extends React.Component<LogoProps> {
  render(): JSX.Element {
    let l = this.props.lender;
    let s = this.props.src;

if (l === "Seacoast") {
  s =
    "https://www.seacoastbank.com/hs-fs/hubfs/Seacoast-Dark-Logo-compressor.png?t=1532980735522&width=472&name=Seacoast-Dark-Logo-compressor.png";
}

if (l === "nbkc") {
  s = "http://measuremedia.com/img/nbkclogo.jpg";
}

return <Avatar src={s} className="avatar" />;
  }
}
export default withStyles(styles)(LogoAvatar);

查看它是否运行。

无法将类型'typeof LogoAvatar'的参数分配给类型'ComponentType <logoprops＆=“” partial <withtheme =“”>

2 个答案: