使用 withRouter(withStyles(styles)(ComponentName)) 时打字稿错误 [英] Typescript error when using withRouter(withStyles(styles)(ComponentName))

问题描述

我正在使用 React 和 Typescript 创建一个 SPA.我一直在使用 UI 框架 Material UI.我现在遇到了一个错误，我似乎无法弄清楚.此错误跨越多个文件.我收到打字稿错误 TS2345:

I'm creating an SPA using React with Typescript. I've been using the UI framework Material UI. I've run into an error now that I can't seem to figure out. This error runs across multiple files. I get the Typescript error 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)，那么错误就会消失.

I've tried a few searches, and a few solutions with adding in RouteComponentProps from react-router-dom. But they don't seem to work. I've noticed that if i remove the withStyles(styles)(ComponentName) from inside the withRouter, so I just have withRouter(ComponentName), then the error disappears.

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

Here's my code, removed unnecessary bits:

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 的类型

StylesProps is a type for the classes in className, and RouterProps is a type for RouteComponentProps from react-router-props

推荐答案

我找到了解决方案.如果这是最好的解决方案是有争议的.我需要将整个组件包装在 withRouter() 中.

I found a solution. If it's the best solution is debatable. I needed to wrap my whole component in the 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 仅包裹在 Component 中:

Another solution would be to wrap the withRouter around only the Component:

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)) 时打字稿错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！