我想创建一个HOC，它允许我调用从后端获取数据的方法，并在加载时显示加载程序掩码。诀窍是我希望能够为不同的组件传递不同的操作。

所以我想这样称呼它：

export default withPage({
  getLoadingStatus: getStatus,
  actionOnLoad: booksActions.getAllBooksRequest
})(ShareABookContainer);

当我传递一些道具时，我定义了我的Page.js如下：

const withPage = ({
  actionOnLoad,
  getLoadingStatus
}) => WrappedComponent => () => {
  return (
    <PageContainer
      getLoadingStatus={getLoadingStatus}
      wrappedComponent={WrappedComponent}
      actionOnLoad={actionOnLoad}
    />
  );
};

export default withPage;

页面容器。js是最常见的容器，因此：

const PageContainer = props => <PageComponent {...props} />;


const mapStateToProps = (state, ownProps) => ({
  ...
});

const mapDispatchToProps = (dispatch, ownProps) => {
...
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PageContainer);

PageComponent也是一个常见的组件：

class PageComponent extends Component {
  componentDidMount() {
   ...
  }

  render() { return <this.props.wrappedComponent />;
  }
}

export default PageComponent;

发生的事情是，没有任何东西被渲染，如果我使用控制台。我收到的日志wrappedComponent：

包装组件^a（e， t）{！函数（e， t）{if（！（e instanceof t））抛出新的TypeError（"不能调用类作为函数"）}（this， a）； var r=函数（e， t）{if（！e）抛出新的参考错误（"这还没有被初始化-超级（）...

当我通过一些div时，例如test而不是一切都可以正常工作，但我需要的是渲染通过的组件。

我不知道我做错了什么，互联网上的例子也帮不上忙。我找不到像我这样的情况的例子（因此，将道具传递给HOC并在那里使用Redux，这不是一个就是另一个）。如有任何想法/建议/答案，我将不胜感激。