Javascript 在react中导出高阶组件

我有一个加载组件，它是一个HOC

import React, { Component } from "react";

const isEmpty = prop =>
  prop === null ||
  prop === undefined ||
  (prop.hasOwnProperty("length") && prop.length === 0) ||
  (prop.constructor === Object && Object.keys(prop).length === 0);

const LoadingHOC = loadingProp => WrappedComponent => {
  return class LoadingHOC extends Component {
    componentDidMount() {
      this.startTimer = Date.now();
    }

    componentWillUpdate(nextProps) {
      if (!isEmpty(nextProps[loadingProp])) {
        this.endTimer = Date.now();
      }
    }

    render() {
      const myProps = {
        loadingTime: ((this.endTimer - this.startTimer) / 1000).toFixed(2)
      };

      return isEmpty(this.props[loadingProp]) ? (
        <div className="loader" />
      ) : (
        <WrappedComponent {...this.props} {...myProps} />
      );
    }
  };
};

export default LoadingHOC;

我在我的

App.js

中使用

Feed

组件，就像这样

但是，我得到以下错误-

警告：函数作为子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者您可能想调用此函数而不是返回它。

我理解这是因为没有正确调用HOC。但是我在导出默认加载宏（“contacts”，Feed）时做错了什么？

您的HOC是一个函数。所以你需要打两次电话

export default LoadingHOC("contacts")(Feed);

export default LoadingHOC("contacts")(Feed);