Question

我想要一个包装每个组件视图的应用程序HOC。此HOC对用户进行身份验证并设置Google Analytics跟踪。我正在升级到路由器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 ..导入它，则可以在export之前插入const：

export const AppWrapper = (WrappedComponent) => {

HOC作为React Redux的App包装器

1 个答案: