简介
React-With-Firestore 是一个用于 React 应用程序的 Firebase 帮助程序库，它使前端开发人员能够方便地使用 Firebase 实时数据库。此库提供了一组简单的 API，可以用于在 React 应用程序中使用 Firebase 实时数据库。本文将详细介绍如何使用 React-With-Firestore 库的许多功能，以及如何构建使用 Firestore 数据库的 React 应用程序。
安装
使用 npm 安装 react-with-firestore 库：
--- ------- ------ --------------------
使用
首先，必须在您的组件中导入 Firebase 和 React-With-Firestore 库：
------ -------- ---- --------------- ------ --------------------- ------ - ------------------ ----------------- - ---- -----------------------
初始化 Firestore
-- --- --------- ------------------------ ---------- -------------------- ------------ --------------------------------------- --- -- -- --------- --- ----- --------- - ---------------------
FirestoreProvider
使用 FirestoreProvider 组件包装您的应用程序组件，以将 Firestore 实例注入应用程序中的所有组件中：
----- --- - -- -- -
------------------ ------------------- ----------------------
-------- --
--------------------
--FirestoreDocument
使用 FirestoreDocument 组件来访问 Firestore 文档：
----- ------------- - -- -- -
------------------
---------------------
---------- ---------- ---- -- --
--------- - --------------------- - ---------------------------------
-
--
--这里，我们使用 path 属性来指定我们想要访问的 Firestore 文档的位置。该 render 回调返回一个 isLoading 属性和一个 data 属性。 isLoading 属性用于检查该文档是否正在加载中，而 data 属性则返回来自该 Firestore 文档的数据。
FirestoreCollection
使用 FirestoreCollection 组件来从 Firestore 中检索集合：
----- ------------- - -- -- -
-------------------- ----------------- -----------
--- ---------- ---- -- --
--------- - -
---------------------
- - -
-----
--------------- -- -
---- -----------------------------------------------
---
------
-
-
----------------------
--这里，我们使用 path 属性来指定我们想要访问的 Firestore 集合的位置。该 limit 属性用于指定我们希望加载的文档数量，而 render 回调返回一个 isLoading 属性和一个 data 属性。 isLoading 属性用于检查该集合是否正在加载中，而 data 属性则返回从该集合中检索到的数据。
常见问题
如何检查 Firestore 是否已加载？
为了检查 Firestore 是否已加载，您可以检查 FirestoreProvider 组件中 isLoading 属性：
----- --- - -- -- -
------------------ ------------------- ----------------------
--- --------- -- -- ---------- - --------------------- - -------- ----
--------------------
--如何使用 React-With-Firestore 实现实时更新？
要使用 React-With-Firestore 实现实时更新，您可以使用实时更新的 Firestore 查询：
----- ------------- - -- -- -
-------------------- ----------------- -----------
--- ---------- ---- -- --
--------- - -
---------------------
- - -
-----
--------------- -- -
------------------
------------
-----------------------------
---------- ---------- ---- -- --
--------- - -
---------------------
- - -
---------------------------------
-
-
--
---
------
-
-
----------------------
--这里，我们使用 FirestoreCollection 组件来检索集合，并在每个文档上使用 FirestoreDocument 组件来匹配 Firestore 文档。在 FirestoreDocument 组件中，我们只需要指定 path 属性，以便它可以自动订阅实时更改。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600566ac81e8991b448e2e5c