0

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

它给了我以下错误-

TypeError: (0 , _AppWrapper2.default) is not a function

这可能与我创建 HOC 的方式有关。有任何想法吗？

路由.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>
     );
   }
 }
4

1 回答 1

1

看起来你没有导出AppWrapper. 如果您使用 导入它import AppWrapper from ..，请在末尾添加此行AppWrapper.js：

export default AppWrapper;

或将 const 声明替换为

export default (WrappedComponent) => { ..

如果你用 导入它，你可以在 :之前import {AppWrapper} from ..插入一个：exportconst

export const AppWrapper = (WrappedComponent) => {
于 2017-11-03T23:48:06.723 回答