Question

我在reactjs应用程序中有一个类组件，我希望它使用路由器和翻译。

interface CommonHeaderProps extends RouteComponentProps<any> {
}

class CommonHeader extends React.Component<CommonHeaderProps> {  

  render() {


    return (
      <div>

      </div>
    );
  }
}

const mapStateToProps = (state: RootState) => ({

})

const mapDispatchToProps = {};

export default withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(CommonHeader));

我希望这个组件是

withRouter()(CommonHeader) 和 withTranslation()(CommonHeader)

但是这样做不起作用

export default withTranslation()(withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(CommonHeader)));

我尝试了

const Component = connect(
  mapStateToProps,
  mapDispatchToProps
)(CommonHeader)

export default compose<CommonHeader>(
 withTranslation,
 withRouter,
)(Component)

但是当我尝试调用该组件时，出现以下错误：

JSX元素类型'CommonHeader'没有任何构造或调用签名

Answer 1

假设，withRouter()(CommonHeader)和withTranslation()(CommonHeader)都可以工作，看来您仍然需要调用compose内的两个HOC。

export default compose(
  withTranslation(), // note the `()`
  withRouter(),      // note the `()`
)(Component)

您也可以在connect内移动compose

export default compose(
  withTranslation(), 
  withRouter(), 
  connect(mapStateToProps, mapDispatchToProps,)
)(CommonHeader)

如何两次包装HOC组件

1 个答案: