时间戳

首页 > 解决方案 > 有没有办法在 React 中为装饰器创建组合函数？

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

问题描述

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

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

像这样的东西：

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

对应的代码应该是：

export default withProvider(
  withFunctionality(
    MyComponent
  )
)

以下代码是我尝试过的：

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

但是，当这样做时，我的某些组件不再起作用。

有什么问题吗？

仍可获取更多信息。

标签： javascriptreactjs

解决方案

您始终可以将flowRightlodash 中的函数用作 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);

此示例已在 GraphSQL 上下文中使用，但我认为您已经了解了使用组件组合其他内容的想法。

这也是函数在 lodash 文档中的工作方式。flowRight

推荐阅读