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也是常见的组件：

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

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

export default PageComponent;

发生的事情是什么都没有呈现，如果我用console.logwrappedComponent接收到了

WrappedComponentƒa（e，t）{！function（e，t）{if（！（e instanceof t））throw new TypeError（“无法将类作为函数调用”）}（this，a）; var r = function（e，t）{if（！e）抛出新的ReferenceError（“ 已初始化-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 /> }

变量名必须大写。

使用React HOC（高阶组件），Redux和传递道具获取数据

1 个答案: