我正在开发一个完整的网络应用程序,其中包含一些使用多个装饰器 (HOC) 的组件。
我想知道是否有一种方法可以通过一次调用使用多个装饰器。
像这样:
export default compose(
[
withFunctionality,
withProvider
]
)(MyComponent)
对应的代码应该是:
export default withProvider(
withFunctionality(
MyComponent
)
)
以下代码是我尝试的:
function compose(hocs) {
return (Component) => hocs.reduce(
(component, hoc) => hoc(component),
Component
)
}
然而,当这样做时,我的一些组件不再工作了。
知道出了什么问题吗?
仍可获取更多信息。
答案 0 :(得分:0)
你总是可以使用 lodash 中的 flowRight
函数作为 compose 函数。
这是我的 graphql 项目中的一个实际示例,目的是将我的查询/突变注入到我的组件中:
import { graphql } from "react-apollo";
import { flowRight as compose } from "lodash";
... some react code
// export like this
export default compose(
graphql(myQuery),
graphql(myMutation)
)(MyComponent);
这个例子已经在 graphql 上下文中使用过,但我认为你已经有了用你的组件组合一些其他东西的想法。
还有 here 是 flowRight
函数在 lodash 文档中的工作方式。
答案 1 :(得分:0)