NPM 包 React-With-Firestore 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

React-With-Firestore 是一个用于 React 应用程序的 Firebase 帮助程序库，它使前端开发人员能够方便地使用 Firebase 实时数据库。此库提供了一组简单的 API，可以用于在 React 应用程序中使用 Firebase 实时数据库。本文将详细介绍如何使用 React-With-Firestore 库的许多功能，以及如何构建使用 Firestore 数据库的 React 应用程序。

安装

使用 npm 安装 react-with-firestore 库：

npm install --save react-with-firestore

使用

首先，必须在您的组件中导入 Firebase 和 React-With-Firestore 库：

import firebase from 'firebase/app';
import 'firebase/firestore';
import { FirestoreProvider, FirestoreDocument } from 'react-with-firestore';

初始化 Firestore

// 初始化 Firebase:
firebase.initializeApp({
  projectId: '<your-project-id>',
  databaseURL: 'https://<your-db-url>.firebaseio.com',
});

// 获取 Firestore 实例:
const firestore = firebase.firestore();

FirestoreProvider

使用 FirestoreProvider 组件包装您的应用程序组件，以将 Firestore 实例注入应用程序中的所有组件中：

const App = () => (
  <FirestoreProvider firebase={firebase} firestore={firestore}>
    <YourApp />
  </FirestoreProvider>
);

FirestoreDocument

使用 FirestoreDocument 组件来访问 Firestore 文档：

const YourComponent = () => (
  <FirestoreDocument
    path="collection/doc"
    render={({ isLoading, data }) =>
      isLoading ? <div>Loading...</div> : <div>{JSON.stringify(data)}</div>
    }
  />
);

这里，我们使用 path 属性来指定我们想要访问的 Firestore 文档的位置。该 render 回调返回一个 isLoading 属性和一个 data 属性。 isLoading 属性用于检查该文档是否正在加载中，而 data 属性则返回来自该 Firestore 文档的数据。

FirestoreCollection

使用 FirestoreCollection 组件来从 Firestore 中检索集合：

-- -------------------- ---- -------
----- ------------- - -- -- -
  -------------------- ----------------- -----------
    --- ---------- ---- -- --
      --------- - -
        ---------------------
      - - -
        -----
          --------------- -- -
            ---- -----------------------------------------------
          ---
        ------
      -
    -
  ----------------------
--

这里，我们使用 path 属性来指定我们想要访问的 Firestore 集合的位置。该 limit 属性用于指定我们希望加载的文档数量，而 render 回调返回一个 isLoading 属性和一个 data 属性。 isLoading 属性用于检查该集合是否正在加载中，而 data 属性则返回从该集合中检索到的数据。

常见问题

如何检查 Firestore 是否已加载？

为了检查 Firestore 是否已加载，您可以检查 FirestoreProvider 组件中 isLoading 属性：

const App = () => (
  <FirestoreProvider firebase={firebase} firestore={firestore}>
    {({ isLoading }) => (isLoading ? <div>Loading...</div> : <YourApp />)}
  </FirestoreProvider>
);

如何使用 React-With-Firestore 实现实时更新？

要使用 React-With-Firestore 实现实时更新，您可以使用实时更新的 Firestore 查询：

-- -------------------- ---- -------
----- ------------- - -- -- -
  -------------------- ----------------- -----------
    --- ---------- ---- -- --
      --------- - -
        ---------------------
      - - -
        -----
          --------------- -- -
            ------------------
              ------------
              -----------------------------
              ---------- ---------- ---- -- --
                --------- - -
                  ---------------------
                - - -
                  ---------------------------------
                -
              -
            --
          ---
        ------
      -
    -
  ----------------------
--

这里，我们使用 FirestoreCollection 组件来检索集合，并在每个文档上使用 FirestoreDocument 组件来匹配 Firestore 文档。在 FirestoreDocument 组件中，我们只需要指定 path 属性，以便它可以自动订阅实时更改。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600566ac81e8991b448e2e5c