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> 
    ); 
    } 
}

來源

2017-11-03 Yasir

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) => {

來源

2017-11-03 23:48:06 Oblosys

HOC作爲React Redux的應用程序封裝

回答

相關問題