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”; }'不能分配给类型 '内在属性＆amp;挑选＆amp; WithStyles，“text”......'。输入'{text：“foo”; }是的不能指定类型'Pick＆amp; WithStyles，“text”| “课程”| “主题” ＆GT;”。属性类型'{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

<强>更新

将使用构造函数的组件的解决方案，并且不会复制和粘贴(define add1 (lambda (x) (+ x 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

TypeScript 2.6 - ＆gt; material-ui 1.0.0-beta.24 withStyles with react-router withRouter - ＆gt;类型

1 个答案: