Question

我正在使用带有Typescript的React创建一个SPA。我一直在使用UI框架的Material UI。现在我似乎无法弄清楚，我遇到了一个错误。此错误跨多个文件运行。我收到打字稿错误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的类型

Answer 1

我找到了解决方案。如果是最好的解决方案则值得商bat。我需要将整个组件包装在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));

使用withRouter（withStyles（styles）（ComponentName））时出现Typescript错误

1 个答案: