时间戳

首页 > 解决方案 > 柯里化增强组件

reactjs - 柯里化增强组件

问题描述

我很难理解应用于反应组件的柯里化。

LanguageContext.js

 <LanguageContext.Consumer>
   {value => <Component languageContext={value} {...props} />}
 </LanguageContext.Consumer>
)

导航栏.js

export default withLanguageContext(withStyles(styles)(Navbar))

一个更简单的例子。

const add = x => y => x + y

如果我们调用 add(2) ，它将返回一个柯里化值为 x 的函数。为了得到这个函数的结果，我们需要调用 add(2)(2) 这将返回 4。所以，当我们这样做时，在导航栏中
withLanguageContext(withStyles(styles)(Navbar))

根据我的理解，返回一个需要 props 的函数，以便在 LanguageContext.Consumer 之后返回。但是，我们没有明确传递任何道具。在这种情况下，我的期望是这样的： withLanguageContext(withStyles(styles)(Navbar))(props)

标签： reactjscurrying

解决方案

Props 或多或少隐式传递给React Components，但在技术上它们是函数，因此使用 react 函数组件可能更容易说明。假设这是你的NavBar：

const NavBar = props => (<div>...</div>);

我们清楚地看到，是的，它是一个函数，但我们从不将它称为一个函数，即NavBar(props)，react 框架将其实例化为一个组件<NavBar {...props} />，{NavBar}即

这种模式在 React 世界中被称为高阶组件（HOC），而不是高阶函数的函数式编程名称。它们是返回其他反应组件的函数。

高阶组件

推荐阅读