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

Posted 2023-04-14

【中文标题】魔法？ React 上下文提供者从何而来？命名约定？

【英文标题】：Magic? Where does the React Context Provider come from? Naming convention?

【发布时间】：2021-09-28 11:00:09

【问题描述】：

我在我的应用程序中使用 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);

【参考方案1】：

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

【讨论】：

谢谢 :-) 是否有任何声明或方法可以说明它是 HOC 并传入数据？