0
我想要一个包装每个组件视图的应用程序HOC。 此HOC验证用户并设置Google Analytics跟踪。 我正在升级到路由器4,并且遇到了使其工作的问题。HOC作为React Redux的应用程序封装
它给我下面的错误 -
TypeError: (0 , _AppWrapper2.default) is not a function
这很可能关系到我如何创建HOC。 任何想法?
routes.js
export default (
<Switch>
<Route exact path="/" component={AppWrapper(Home)} />
<Route exact path="/channels" component={AppWrapper(Channels)} />
</Switch>
);
const AppWrapper = (WrappedComponent) => {
return class AppWrapperComponent extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
const page = this.props.location.pathname;
this.trackPage(page);
}
componentWillReceiveProps(nextProps) {
const currentPage = this.props.location.pathname;
const nextPage = nextProps.location.pathname;
if (currentPage !== nextPage) {
this.trackPage(nextPage);
}
}
trackPage = page => {
GoogleAnalytics.set({
page,
...options,
});
GoogleAnalytics.pageview(page);
};
render() {
return (
<div>
{this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
<WrappedComponent {...this.props.chidren} />
</div>
);
}
}
https://stackoverflow.com/questions/47099094/react-hoc-render-wrapped-component这可能是有帮助 – Aaqib
您需要在大括号内的routes.js中导入AppWrapper,如下所示:从'./wrapper'导入{AppWrapper} – krmzv