如何使用 ReactJS 在 firebase 中获取当前日期和时间？

在 ReactJS 中，可以使用 Firebase 提供的实时数据库或云存储服务来获取当前日期和时间。以下是一个简单的步骤，帮助你在 Firebase 中获取当前日期和时间。

步骤 1：安装 Firebase

首先，你需要在项目中安装 Firebase。你可以通过以下命令来安装 Firebase：

npm install firebase --save

步骤 2：初始化 Firebase

在项目的根目录下创建一个名为 firebase.js 的文件。在这个文件中，你需要使用你的 Firebase 项目的配置信息来初始化 Firebase。这可以通过以下方式完成：

import firebase from 'firebase/app';
import 'firebase/database';

const config = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  projectId: '<your-project-id>',
  storageBucket: '<your-storage-bucket>',
  messagingSenderId: '<your-messaging-sender-id>'
};

firebase.initializeApp(config);

export default firebase.database();

步骤 3：获取当前日期和时间

有了 Firebase 的初始化配置，我们就可以获取当前日期和时间了。在你的组件中，你可以这样做：

import React, { Component } from 'react';
import firebase from './firebase';

class App extends Component {
  state = {
    currentTime: ''
  };

  componentDidMount() {
    const ref = firebase.ref('serverTime/time');
    ref.on('value', snapshot => {
      this.setState({ currentTime: snapshot.val() });
    });
  }

  render() {
    return (
      <div>
        <p>The current time is: {this.state.currentTime}</p>
      </div>
    );
  }
}

export default App;

在这个组件中，我们首先从 Firebase 实时数据库中获取一个指向 serverTime/time 的引用。然后，我们用 on 方法监听这个引用，以便在数据库中的 time 值发生更改时更新组件的状态。在 render 方法中，我们从 state 中获取 currentTime 属性，以便将其显示在组件中。

结论

通过上述步骤，你就可以使用 ReactJS 在 Firebase 中获取当前日期和时间了。当你的 Firebase 中的 time 值发生更改时，你的应用程序将自动更新，以显示最新的日期和时间。