如何将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)

您也可以在compose中移动connect

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