HOC 作为 React Redux 的应用程序包装器

Question

我想要一个包装每个组件视图的应用程序 HOC。此 HOC 对用户进行身份验证并设置 Google 分析跟踪。我正在升级到 Router 4，但无法正常工作。

它给我以下错误 -

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

Answer 1

您似乎没有导出 AppWrapper。如果你用import AppWrapper from ..导入，在AppWrapper.js末尾添加这一行：

export default AppWrapper;

或将 const 声明替换为

export default (WrappedComponent) => { ..

如果用import {AppWrapper} from ..导入，可以在const前插入一个export:

export const AppWrapper = (WrappedComponent) => {

HOC 作为 React Redux 的应用程序包装器

HOC as an App Wrapper for React Redux

reactjs

react-redux

higher-order-components

react-router-v4