魔术?React上下文提供程序来自哪里?命名约定

Question

我在我的应用程序中使用firebase auth，它正在工作——但我很难理解提供者是如何将数据传递到app.js中的应用程序组件的。它似乎没有显式传入。是否有命名约定或传递数据的东西？

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

您正在从HOCwithFirebaseAuth获取提供程序。它包裹您的组件。这就是为什么你可以使用提供商，即使你没有通过，HOC"提供"了它。