HOC作为React Redux的应用程序封装

问题描述：

我想要一个包装每个组件视图的应用程序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

答

看起来像是你没有出口AppWrapper。如果您有import AppWrapper from ..导入，在AppWrapper.js末尾添加一行：

export default AppWrapper;

或

export default (WrappedComponent) => { ..

更换常量声明如果用import {AppWrapper} from ..导入它，你可以插入前的exportconst：

export const AppWrapper = (WrappedComponent) => {

HOC作为React Redux的应用程序封装

相关推荐