Firebase、React、高阶函数答案

【问题标题】：Firebase, React, High Order FunctionFirebase、React、高阶函数
【发布时间】：2019-08-10 04:17:14
【问题描述】：

import React from "react";

const FirebaseContext = React.createContext(null);

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

export default FirebaseContext;

这是一个 HOC，我第一次使用 React Content API，这段代码让我很难过。请帮忙为什么 export const withFirebase = Component => props => 这种结构

【问题讨论】：

请具体说明——实际问题是什么？
为什么export const有Component和props？
因为这就是所谓的 HOC（高阶组件）。这不是特定于上下文 API。
@Navish 因为它是一个组件-that-takes-props 被一个函数（组件）包装了你给它的组件。它只是嵌套函数。

标签： reactjs firebase higher-order-functions

【解决方案1】：

因为这是一个柯里化函数。 HOC 将一个组件作为输入。此外，您的组件需要道具，这就是道具的用武之地。

function withFirebase(Component){
  //your HOC logic
}

function Component(props){
 //your logic for component
}

这就是普通 javascript 的样子

withFirebase(Component(Props))

ES6 等效

withFirebase = (Component) => (props)

希望这会有所帮助。

【讨论】：