有没有办法在 React 中为装饰器创建组合函数?

时间:2021-06-07 14:05:05

标签: javascript reactjs

我正在开发一个完整的网络应用程序,其中包含一些使用多个装饰器 (HOC) 的组件。

我想知道是否有一种方法可以通过一次调用使用多个装饰器。

像这样:

export default compose(
  [
    withFunctionality,
    withProvider
  ]
)(MyComponent)

对应的代码应该是:

export default withProvider(
  withFunctionality(
    MyComponent
  )
)

以下代码是我尝试的:

function compose(hocs) {
  return (Component) => hocs.reduce(
    (component, hoc) => hoc(component),
    Component
  )
}

然而,当这样做时,我的一些组件不再工作了。

知道出了什么问题吗?

仍可获取更多信息。

2 个答案:

答案 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 上下文中使用过,但我认为你已经有了用你的组件组合一些其他东西的想法。

还有 hereflowRight 函数在 lodash 文档中的工作方式。

答案 1 :(得分:0)

以下是伟大的 recompose 包中 compose 函数的经典定义:

const compose = (...funcs) =>
  funcs.reduce((a, b) => (...args) => a(b(...args)), arg => arg)

export default compose

如果您使用 redux,它还有 compose 功能。