如何将 HOC 组件包装两次

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)