javascript - 如何在 React JS 中正确导入 firebase 模块以初始化应用程序
问题描述
我正在尝试初始化一个 firebase 应用程序,但我不明白如何或在哪里调用它。
我有一个文件名 fire.tsx,里面有一个对 firebase 的调用initializeApp
。但现在呢?如何将其包含在我的应用程序中?
我认为只需添加import { firebaseApp, firebaseAnalytics } from './fire';
到 App.tsx 的顶部就可以了,但显然不行。我做错了吗?
import firebase from "firebase";
import "firebase/auth";
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey: "xxx-xx-xx",
authDomain: "xxx-xx-xx",
databaseURL: "xxx-xx-xx",
projectId: "xxx-xx-xx",
storageBucket: "xxx-xx-xx",
messagingSenderId: "xxx-xx-xx",
appId: "xxx-xx-xx",
measurementId: "xxx-xx-xx"
};
const firebaseApp = initializeApp(firebaseConfig);
export default firebaseApp;
export const firebaseAuth = firebase.auth();
export const firebaseAnalytics = getAnalytics();
应用程序.tsx
import { firebaseApp, firebaseAnalytics } from './fire';
解决方案
仅使用新的 Modular SDK,因为兼容版本将在以后的更新中删除。尝试以这种方式重构代码:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey: "xxx-xx-xx",
authDomain: "xxx-xx-xx",
databaseURL: "xxx-xx-xx",
projectId: "xxx-xx-xx",
storageBucket: "xxx-xx-xx",
messagingSenderId: "xxx-xx-xx",
appId: "xxx-xx-xx",
measurementId: "xxx-xx-xx"
};
const firebaseApp = initializeApp(firebaseConfig);
export const firebaseAuth = getAuth(firebaseApp);
export const firebaseAnalytics = getAnalytics(firebaseApp);
新的模块化 SDK 检查是否已创建默认实例,因此您不必喜欢以前的版本。
推荐阅读
- windows - 在 Windows 上,Git Bash vs Windows Power Shell vs 命令提示符有什么区别
- javascript - CSS 滚动捕捉延迟多长时间?
- vba - 使用 Excel VBA 从 Iseries (AS400) 获取数据的宏
- sql-server - 仅选择完成所有其他活动的行
- c# - Linq 查询自引用对象以获取无子元素
- angularjs - 在 AngularJS 文件中使用常量
- r - R中的精确Cochran Q检验
- node.js - 如何在浏览器中查看我的 Compute Engine 应用?
- resteasy - Keycloak/OIDC : 检索用户组属性
- ios - 无法分配给属性“observationTime”是仅获取属性