Question

编辑：

请注意，错误的构造函数是由IntelliJ IDEA生成的。现在，此问题已解决，请参见：https://youtrack.jetbrains.com/issue/WEB-35178

我正在考虑在我的应用程序中使用Material-UI，但是在withStyles样式解决方案与TypeScript结合使用时遇到了一些麻烦。

我正在尝试基于Popper documentation来制作自己的小包装器组件。

问题是，如果我以惯用的方式（下面的代码{(B)）显式定义一个构造函数，则此行：

export default withStyles(styles)(HelpComponent);

给出此错误：

ERROR in [at-loader] ./src/main/ts/screen/keyword/HelpComponent.tsx:150:35 
    TS2345: Argument of type 'typeof HelpComponent' is not assignable to parameter of type 'ComponentType<never>'.
  Type 'typeof HelpComponent' is not assignable to type 'StatelessComponent<never>'.
    Type 'typeof HelpComponent' provides no match for the signature '(props: never, context?: any): ReactElement<any> | null'.

我能够做这项工作的唯一方法是忽略显式构造函数并将状态定义为字段（在下面的代码中(A)）。

当我使用withStyles时，是否有一种方法可以以正常方式声明构造函数？

我实际上不介意像这样直接设置状态，这有点样板。我是否通过以这种方式初始化构造函数外部的状态来放弃任何内容？

最终，我只是不明白TypeScript错误消息-谁能解释它要说的话？

import {
  createStyles,
  Paper,
  Popper,
  Theme,
  WithStyles,
  withStyles
} from '@material-ui/core';
import * as React from 'react';
import {ReactNode, SyntheticEvent} from 'react';
import {EventUtil} from "appUtil/EventUtil";
import {WarningSvg} from "component/svg-icon/WarningSvg";
let log = require("log4javascript").getLogger("HelpComponent");

export interface HelpComponentProps extends WithStyles<typeof styles> {
  children:ReactNode;
}

export interface HelpComponentState {
  open:boolean;
  arrowRef?: HTMLElement;
}

class HelpComponent extends React.Component<HelpComponentProps, HelpComponentState> {
  helpRef!: HTMLElement;

  // (A)
  state = {open: false, arrowRef: undefined};

  // (B)
  // constructor(props: HelpComponentProps, context: HelpComponentState){
  //   super(props, context);
  //   this.state = {open: false, arrowRef: undefined};
  // }

  handleClick = (event:SyntheticEvent<any>) => {
    EventUtil.stopClick(event);
    this.setState({open: !this.state.open,});
  };

  handleArrowRef = (node:HTMLElement) => {
    this.setState({
      arrowRef: node,
    });
  };

  render(){
    const {classes} = this.props;
    return <span ref={(ref)=>{if(ref) this.helpRef = ref}}>
      <WarningSvg onClick={this.handleClick}/>
      <Popper id={"help-popper"} className={classes.popper} transition
        open={this.state.open} anchorEl={this.helpRef}
        modifiers={{arrow:{enabled:true, element: this.state.arrowRef}}}
      >
        <span className={classes.arrow} ref={this.handleArrowRef}/>
        <Paper className={classes.paper}>{this.props.children}</Paper>
      </Popper>
    </span>;
  }

}

const styles = (theme: Theme) => createStyles({
  root: {
    flexGrow: 1,
  },
  scrollContainer: {
    height: 400,
    overflow: 'auto',
    marginBottom: theme.spacing.unit * 3,
  },
  scroll: {
    position: 'relative',
    width: '230%',
    backgroundColor: theme.palette.background.paper,
    height: '230%',
  },
  legend: {
    marginTop: theme.spacing.unit * 2,
    maxWidth: 300,
  },
  paper: {
    maxWidth: 400,
    overflow: 'auto',
  },
  select: {
    width: 200,
  },
  popper: {
    zIndex: 1,
    '&[x-placement*="bottom"] $arrow': {
      top: 0,
      left: 0,
      marginTop: '-0.9em',
      width: '3em',
      height: '1em',
      '&::before': {
        borderWidth: '0 1em 1em 1em',
        borderColor: `transparent transparent ${theme.palette.common.white} transparent`,
      },
    },
    '&[x-placement*="top"] $arrow': {
      bottom: 0,
      left: 0,
      marginBottom: '-0.9em',
      width: '3em',
      height: '1em',
      '&::before': {
        borderWidth: '1em 1em 0 1em',
        borderColor: `${theme.palette.common.white} transparent transparent transparent`,
      },
    },
    '&[x-placement*="right"] $arrow': {
      left: 0,
      marginLeft: '-0.9em',
      height: '3em',
      width: '1em',
      '&::before': {
        borderWidth: '1em 1em 1em 0',
        borderColor: `transparent ${theme.palette.common.white} transparent transparent`,
      },
    },
    '&[x-placement*="left"] $arrow': {
      right: 0,
      marginRight: '-0.9em',
      height: '3em',
      width: '1em',
      '&::before': {
        borderWidth: '1em 0 1em 1em',
        borderColor: `transparent transparent transparent ${theme.palette.common.white}`,
      },
    },
  },
  arrow: {
    position: 'absolute',
    fontSize: 7,
    width: '3em',
    height: '3em',
    '&::before': {
      content: '""',
      margin: 'auto',
      display: 'block',
      width: 0,
      height: 0,
      borderStyle: 'solid',
    },
  },
});

export default withStyles(styles)(HelpComponent);

版本：

“打字稿”：“ 3.0.3”
“ @类型/反应”：“ 16.4.14”
“ @ types / react-dom”：“ 16.0.7”
“ @ material-ui / core”：“ 3.1.1”
“ webpack”：“ 4.19.1”

Answer 1

如果您查看React.ComponentType的定义：

type ComponentType<P = {}> = ComponentClass<P> | StatelessComponent<P>;

您尝试使用的替代方法是ComponentClass，其定义为：

interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
    new (props: P, context?: any): Component<P, S>;
    // ...
}

请注意，context参数是可选的（?标记）。问题在于构造函数的context参数不是可选的，因此HelpComponent与希望能够省略context参数的调用者不兼容。如果将参数设为可选，则错误应该消失。

当TypeScript报告无法将typeof HelpComponent分配给并集类型React.ComponentType的错误时，它将半任意选择一个并集类型的成员来报告详细错误。不幸的是，它没有选择您想要的那个，因此错误消息不是很有用。

我实际上不介意像这样直接设置状态，这有点样板。我会通过以这种方式在构造函数外部初始化状态来放弃任何事情吗？

是的，通过覆盖state属性，您可能无意中将其类型更改为与传递给React.Component基类的状态类型参数有所不同。

打字稿：为什么Material-UI“ withStyles（）”无法与显式构造函数一起使用？

1 个答案: