react-firebase-hoc 是一个适用于 React 应用的 Firebase 高阶组件，它让开发者可以在应用中方便地使用 Firebase 服务。在本文中，我们将介绍如何使用 react-firebase-hoc 来集成 Firebase 数据库和身份验证服务到您的 React 应用中。
安装 react-firebase-hoc
在开始之前，需要先安装 react-firebase-hoc，运行以下命令：
npm install react-firebase-hoc firebase --save
使用 react-firebase-hoc
要使用 react-firebase-hoc，需要跟踪应用的 Firebase 实例，并将其传递给 HOC。Firebase 实例需要在应用程序的主要组件中进行初始化。
以下是一个示例 App.js 文件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ - ---- ---------------------
-- -- --------
----- ------ - -
------- --------------------
----------- ------------------------
------------ -------------------------
---------- -----------------------
-------------- ---------------------------
------------------ -------------------------------
--
-- --- --------
----- ----------- - -------------------------------
----- --- ------- --------- -
-------- -
------ -
-----
-- ----- ----
------
--
-
-
------ ------- ----------------- - ----------- ---在这个示例中，我们导入了 withFirebase HOC，并将其传递给我们的 App 组件。还配置了 Firebase 实例对象，然后通过 firebase.initializeApp初始化 Firebase。
现在，我们可以在应用的任何组件中使用 Firebase 服务了。
使用 Firebase 数据库
要使用 Firebase 数据库，需要通过 HOC 获取 database() 方法。以下是一个展示如何读取并显示数据的组件的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ - ---- ---------------------
----- ---------------- ------- --------- -
------------------ -
-------------
---------- - -
------ --
--
-
------------------- -
----- - -------- - - --------------------
------------------------------------ -------- -- -
--- ----- - ---
------------------------------ --
---------------------------- -------------------- - ---- ----------------- ---
--
--------------- ----- ---
---
-
-------- -
----- - ----- - - -----------
------ -
----
--------------- -- -
--- -------------------------------
---
-----
--
-
-
------ ------- -------------------------------这里，我们使用 HOC 获取 database() 方法来读取 /todos 节点的数据。在该节点上添加 .on('value', callback) 可以监听数据的更新。在这个回调函数中，我们将数据转换成数组，然后更新组件的状态。
使用 Firebase 身份验证服务
要使用 Firebase 身份验证服务，需要通过 HOC 获取 auth() 方法。以下是一个使用 Firebase 身份验证服务进行登录的组件示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ - ---- ---------------------
----- ----- ------- --------- -
------------------ -
-------------
---------- - -
------ ---
--------- ---
------ ----
--
-
----------------- - ----- -- -
----- - ----- ----- - - -------------
--------------- ------- ----- ---
--
------------ - ----- -- -
-----------------------
----- - ------ -------- - - -----------
----- - ---- - - --------------------
---------------------------------------- ---------
------------ -- -
--------------- ----- ---
---
--
-------- -
----- - ------ --------- ----- - - -----------
------ -
----- -----------------------------
------
------------
------------
-------------------
-------------
---------------------------------
--
------
---------------
---------------
----------------------
----------------
---------------------------------
--
------ -- -----------------------
------- ------------------ -----------
-------
--
-
-
------ ------- --------------------这个组件使用 HOC 获取 auth() 方法并使用 signInWithEmailAndPassword 方法进行身份验证。如果身份验证失败，将在组件中显示错误信息。
结论
有了 react-firebase-hoc，可以轻松地将 Firebase 数据库和身份验证服务集成到 React 应用程序中。希望这个教程对您有帮助，让您了解如何使用 react-firebase-hoc 实现 Firebase 集成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005591681e8991b448d6885