1

假设我们有以下 HOC：

const myHoc = someProps => ComposedComponent => {
  const propsToPass = { /* ...some calculations... */ }; 
  return <ComposedComponent {...propsToPass} />;
};

我如何将道具传递ComposedComponent到myHoc外面myHoc？

用例

我正在编写一个与redux-orm. 自然，我想用 HOC 实现从数据层抽象视图层（哑组件）的经典思想。由于模型有些统一，我使用工厂模式来创建这些 HOC。

工厂函数签名：

bindDocument(Model)(documentId)(ComposedComponent) => DumbComponentWithDocumentProps

在我的应用程序中，我有一个可以“选择”这些文档的丰富编辑器。然后documentId将这些选定的文档存储在 redux 存储中。我很难用上面的工厂函数编写一个 HOC 来将选定的文档绑定到一个哑组件。

示例所需的函数签名：

bindSelectedMovieTicketDocument(ComposedComponent) => DumbComponentWithDocumentProps

我可以手动检索商店并获取选定的文档 ID，但这对我来说很难闻。

另一种解决方案是使用 HOC 将选定的文档 id 绑定到一个包装组件，然后该组件将使用该 id（来自它的 props）来创建另一个具有文档绑定 HOC 的 HOC。这可行，但需要大量样板代码才能传递 id。

4

1 回答 1

0 
var bindHOC = (model) => (DumbComp) => {
   return connect(state=>state.docID, null)(() => <DumbComp model={model}>);
}

这将docID作为来自 redux 存储的propDumbComp以及model来自输入参数的 prop 传递。

这样我们就可以避免 2 个 HOC。

于 2018-01-03T04:06:32.453 回答