Firebase, React, High Order Function

Question

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;

This is a HOC and i am first time working with React Content API and this code is giving me a hard time.. plz help Why does the export const withFirebase = Component => props => structured this way

Answer 1

因为这是一个currying函数。 HOC将组件作为输入。另外，您的组件需要道具，也就是道具的所在位置。

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

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

这是普通javascript的外观

withFirebase(Component(Props))

等效于ES6

withFirebase = (Component) => (props)

希望这会有所帮助。