柯里化增强组件答案

【问题标题】：Currying enhanced components柯里化增强组件
【发布时间】：2019-09-07 23:30:41
【问题描述】：

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

LanguageContext.js

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

Navbar.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)

【问题讨论】：

【解决方案1】：

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

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

我们清楚地看到，是的，它是一个函数，但我们从不称它为一个，即NavBar(props)，react 框架将其实例化为一个组件，即<NavBar {...props} />，或者在JSX 文字的情况（已经包含了 props），例如 {NavBar}。

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

【讨论】：