使用 React HOC（高阶组件）、Redux 获取数据并传递 props

Question

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

所以我想这样称呼它：

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

当我在那里传递一些道具时，我定义了我的 withPage.js，如下所示：

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

export default withPage;

PageContainer.js 是最常见的容器，所以：

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


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

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

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

PageComponent 也是一个普通的 Component：

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

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

export default PageComponent;

发生的情况是没有渲染任何内容，如果我收到 console.log WrappedComponent：

WrappedComponent ƒ a(e,t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a);var r=function(e,t){if(!e)throw new ReferenceError("this has not been 初始化 - super()…

当我传递一些 div 时，例如测试而不是一切正常，但我需要的是渲染传递的组件。

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

Answer 1

尝试更简单：

return (
  <PageContainer
    getLoadingStatus={getLoadingStatus}
    actionOnLoad={actionOnLoad} >
    <WrappedComponent />
  </PageContainer>
);

顺便说一句，反应相当“不喜欢”<this.props.wrappedComponent /> 没有错误？？

当需要动态组件时，我可能会使用类似的东西：

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

变量名称必须大写。