Question

我正在尝试将Firebase集成到我的React应用程序中，在查看各种教程之后，我似乎无法就放置firebase初始化代码firebase.initializeApp(config)的位置达成共识。

我的应用程序结构如下：

- app.js
- components
   |___Index.jsx
   |___Layout.jsx
   |___PageContent.jsx

每个文件如下所示

app.js

是否所有使用服务器端呈现的快速设置

Index.jsx

import React from 'react';
import Layout from './Layout.jsx';
import PageContent from './PageContent.jsx';
import './global.css';

class Index extends React.Component {
  render() {
    return (
        <Layout title={this.props.title}>
            <PageContent />
        </Layout>
    );
  }
}

export default Index;

PageContent.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import LandingPage from './components/Landing_Page/Landing.jsx';

class PageContent extends React.Component {
    render() {
        return (
            <LandingPage />
        );
    }
}

if (typeof window !== 'undefined') {
    ReactDOM.render(     
        <PageContent />,
        document.getElementById('root')        
    );
}

export default PageContent;

我需要确保Firebase在我网站的每个页面都可用。现在它是一个单页应用程序，但最终我将添加更多。

有人可以帮我理解我可能把数据库初始化代码放在哪里，以便它可以在任何地方应用吗？

Answer 1

这就是我的做法

在Firebase.js旁边创建文件app.js并输入初始化代码

Firebase.js文件

import * as firebase from 'firebase';

let config = {
    apiKey: "XXXXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXX",
    projectId: "XXXXX",
    storageBucket: "XXXX",
    messagingSenderId: "XXXX"
};
firebase.initializeApp(config);

export default firebase;

然后在每个要使用它的位置导入Firebase.js文件，例如

import React from 'react';    
import firebase from './../Firebase.js'     // <------  import firebase

class Test extends React.Component {

    componentDidMount(){
        firebase.database().ref().child("X").on('value' , {...});
    }

    render() {
        return (
            <h1>Hello</h1>
        );
    }
}

export default Test;

Answer 2

您想要的是，firebase可以全局可用到您的反应组件。

在使用redux之前，同样的问题是，反应组件如何消耗全局状态树？全局变量？来吧，我们知道全局变量是邪恶的。反应道具？看起来很反应但是将道具从根部传递到叶子组件可能并不好玩。

Context API来救援。你只需要firebase绑定就像redux / react-router那样做出反应。

假设你不想重新发明轮子，

如果您使用redux，请考虑react redux firebase
如果您讨厌锅炉板，请考虑react firebase

当然，您也可以通过刚才提到的反应上下文构建自己的反应firebase绑定。

Answer 3

创建名为 firebase.js 的文件

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: 'AIzaXXXXXXXXXXXXXXXXXXXXXXX',
  authDomain: 'test-XXXX.firebaseapp.com',
  databaseURL: 'https://test-db.firebaseio.com',
  projectId: 'test-XXXX',
  storageBucket: 'test-bucket.appspot.com',
  messagingSenderId: 'XXXXXXX',
  appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
};


firebase.initializeApp(firebaseConfig);
export const firebaseAuth = firebase.auth();
export const firestore = firebase.firestore()

然后使用如下：

import { firebaseAuth } from 'firebase'
import SigninForm from 'signin.js'

const ModalSignIn = props => {

  const [email, setEmail] = useState()
  const [password, setPassword] = useState()

  const handleSubmit = e => {
    e.preventDefault()
    firebaseAuth
      .signInWithEmailAndPassword(email, password)
      .then(res => {
        console.log(res.user)
      })
      .catch(err => {
        const { code, message } = err
        console.log(code, message)
      })
  }

  return (<SigninForm/>)

我在哪里初始化React应用程序中的Firebase应用程序？

3 个答案: