使用 withRouter(withStyles(styles)(ComponentName)) 时出现打字稿错误答案

【问题标题】：Typescript error when using withRouter(withStyles(styles)(ComponentName))使用 withRouter(withStyles(styles)(ComponentName)) 时出现打字稿错误
【发布时间】：2020-02-24 12:59:08
【问题描述】：

我正在使用 React 和 Typescript 创建一个 SPA。我一直在使用 UI 框架 Material UI。我现在遇到了一个错误，我似乎无法弄清楚。此错误跨多个文件运行。我收到 Typescript 错误 TS2345：

Argument of type 'ComponentType<Pick<ComponentProps & StylesProps & RouteComponentProps<any, StaticContext, any>, "data" | "header" | "currency" | "history" | "location" | "match" | "staticContext" | "operation" | "matured"> & StyledComponentProps<...>>' is not assignable to parameter of type 'ComponentClass<Pick<ComponentProps & StylesProps & RouteComponentProps<any, StaticContext, any>, "data" | "header" | "currency" | "history" | "location" | "match" | "staticContext" | "operation" | "matured"> & StyledComponentProps<...>, any> | (ComponentClass<...> & FunctionComponent<...>)'.

我尝试了一些搜索，以及一些从 react-router-dom 添加 RouteComponentProps 的解决方案。但它们似乎不起作用。我注意到如果我从 withRouter 中删除 withStyles(styles)(ComponentName)，所以我只有 withRouter(ComponentName)，那么错误就会消失。

这是我的代码，删除了不必要的部分：

import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from './ComponentName.style';
import theme from '../../common/theme';
import { StylesProps, RouterProps } from '../../common/types';
import { withRouter } from 'react-router-dom';

// Material UI imports

interface ComponentProps {
    currency: string;
    data: any;
    header: any;
    operation : any;
}

class ComponentName extends React.Component<ComponentProps & StylesProps & RouterProps> {
    render() {
        const { classes, currency, data, header, operation } = this.props;
        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
        return (
            // Layout
        );
    }
}
export default withRouter(withStyles(styles)(IssuesList));

StylesProps 是 className 中的类的类型，RouterProps 是 react-router-props 中的 RouteComponentProps 的类型

【问题讨论】：

标签： reactjs typescript react-router material-ui react-router-dom

【解决方案1】：

我找到了解决方案。如果它是最好的解决方案是值得商榷的。我需要将整个组件包装在 withRouter() 中。

import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from './ComponentName.style';
import theme from '../../common/theme';
import { StylesProps, RouterProps } from '../../common/types';
import { withRouter } from 'react-router-dom';

// Material UI imports

interface ComponentProps {
  currency: string;
  data: any;
  header: any;
  operation : any;
}

const ComponentName = withRouter(
  class ComponentName extends React.Component<ComponentProps & StylesProps & RouterProps> {
    render() {
      const { classes, currency, data, header, operation } = this.props;
      const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
      return (
        // Layout
      );
    }
  }
);
export default withStyles(styles)(IssuesList);

另一种解决方案是仅将 withRouter 包裹在组件周围：

import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from './ComponentName.style';
import theme from '../../common/theme';
import { StylesProps, RouterProps } from '../../common/types';
import { withRouter } from 'react-router-dom';

// Material UI imports

interface ComponentProps {
  currency: string;
  data: any;
  header: any;
  operation : any;
}

class ComponentName extends React.Component<ComponentProps & StylesProps & RouterProps> {
  render() {
    const { classes, currency, data, header, operation } = this.props;
    const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
    return (
      // Layout
    );
  }
}
export default withStyles(styles)(withRouter(IssuesList));

【讨论】：