TypeScript 2.6 - > material-ui 1.0.0-beta.24 withStyles with react-router withRouter - >类型中缺少属性'classes'

Question

我已经能够使用高阶组件withStyles和withRouter没有问题，但升级到最新版本已导致错误。

https://reactjs.org/docs/higher-order-components.html

使用的包：

"@types/react-router": "^4.0.20",
"@types/react-router-dom": "^4.2.3",
"material-ui": "^1.0.0-beta.24",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

我一直在看两个库的测试，逐个实现它们不是问题：

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-router/test/WithRouter.tsx

https://github.com/mui-org/material-ui/blob/v1-beta/test/typescript/styles.spec.tsx

但是，当我尝试将它们组合时，我收到此错误：

TS2322：输入'{text：“foo”; }'不能赋值为'IntrinsicAttributes＆Pick＆WithStyles，“text”......'。输入'{text：“foo”; }'不能分配给'Pick＆WithStyles'，'text“| “课程”| “主题”>”。类型'{text：“foo”中缺少属性'classes'; }”。

代码，错误只发生在行<DecoratedComponent text="foo" />;上

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactRouter from 'react-router';
import { Redirect, Route, Switch, withRouter, RouteComponentProps  } from 'react-router-dom';
import Grid from 'material-ui/Grid';
import { withStyles, WithStyles, StyleRulesCallback } from 'material-ui/styles';
import { CustomTheme } from 'Features/Client/Styles/MainTheme';
import 'Styles/App.css';
import * as es6ObjectAssign from 'es6-object-assign';
es6ObjectAssign.polyfill();

type withStyleProps = 'mainStyle' | 'innerStyle';

const styles: StyleRulesCallback<withStyleProps> = (theme: CustomTheme) => ({
  mainStyle: {
    backgroundColor: '#F7F7F7',
    minHeight: '100vh',
  } as React.CSSProperties,

  innerStyle: {
    padding: theme.spacing.small,
    paddingTop: 0,
    paddingBottom: 0,
    maxWidth: '90rem',
    margin: '0 auto',
  } as React.CSSProperties,
});

interface IProps {
  text: string;
}

interface IState {

}

class App extends React.Component<IProps & WithStyles<withStyleProps>, IState> {
  constructor(props: IProps & WithStyles<withStyleProps>) {
    super(props);
    this.state = {
    };
  }

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

    return (
      <div className={classes.mainStyle}>
        <div className={classes.innerStyle}>
          <DecoratedComponent text="foo" />;
        </div>
      </div>
    );
  }
}
export default withStyles(styles)(App);

const DecoratedComponent = withStyles(styles)(withRouter(
  class extends React.Component<IProps & RouteComponentProps<{}> & WithStyles<withStyleProps>> {
    render() {
      const { classes, text } = this.props;
      return <div className={classes.mainStyle}>{text}</div>;
    }
  }
));

Answer 1

更新：

将使用构造函数的组件的解决方案，并且不会复制和粘贴IProps2 & RouteComponentProps<IProps> & WithStyles<withStyleProps>

interface IProps2 {
  text: string;
}

type Props2 = IProps2 & RouteComponentProps<{}> & WithStyles<withStyleProps>;

const DecoratedComponent = withRouter(withStyles(styles)(
  class extends React.Component<Props2> {
    render() {
      const { classes, text } = this.props;
      return <div className={classes.mainStyle}>{text}</div>;
    }
  }
));

原版的：

通过首先将withRouter和withStyles放在后来管理解决它。

const DecoratedComponent = withRouter(withStyles(styles)(
  class extends React.Component<IProps & RouteComponentProps<IProps> & WithStyles<withStyleProps>> {
    render() {
      const { classes, text } = this.props;
      return <div className={classes.mainStyle}>{text}</div>;
    }
  }
));