魔法？ React 上下文提供者从何而来？命名约定？

Question

我在我的应用程序中使用 firebase auth 并且它正在工作 - 但是我很难理解提供程序如何将数据传递到 App.js 中的 App 组件中。 它似乎没有明确传递。是否有命名约定或传递数据的东西？

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React from 'react';

import firebase from './firebase'
import withFirebaseAuth from 'react-with-firebase-auth'

import SignInPage from './SignInPage'
import AppContainer from './AppContainer'

const firebaseAppAuth = firebase.auth();

function App(provider){
  return (
    <div className="App">
        {
          provider.user // if user from the provider
          ? <AppContainer 
                authUser={provider.user}
                signOut={provider.signOut}
              />
            : <SignInPage 
              signInWithGoogle={provider.signInWithGoogle}
              error={provider.error}
              />
        }
    </div>
  );
}



const providers = {
  googleProvider: new firebase.auth.GoogleAuthProvider()
};

export default withFirebaseAuth({
  providers,
  firebaseAppAuth,
})(App);

Answer 1

您从 HOC withFirebaseAuth 获取提供程序。它包装了你的组件。这就是为什么即使你没有通过提供者也可以使用它，HOC '提供'了它。