將 Moment.js 用於 React 應用程式

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 什麼是 Moment.js
  2. 在 React 中如何使用 Moment.js
  3. Moment.js 實際示例
  4. react-moment
  5. 其他可行的選擇
將 Moment.js 用於 React 應用程式

很難想象任何涉及日期和時間的現代 Web 應用程式。React 應用程式也不例外。

管理日期和時間是在 React 中構建動態應用程式的核心。由於這個事實,JavaScript 包含一個 Date 物件,這對於涉及日期和時間的簡單操作很有用。

然而,使用 Date 物件說起來容易做起來難。日期 API 不足以格式化、國際化和一般地操作日期。

出於這個原因,JavaScript 開發人員社群建立了許多日期庫來執行一些更高階的操作。這些使我們能夠更有效地處理日期,而不會浪費時間和精力。

什麼是 Moment.js

它是用於在 JavaScript 中格式化日期的最穩定的庫之一。Moment 庫主要用於解析和格式化資料值,但它具有許多可能對構建現代應用程式有用的功能。

例如,Moment 也可用於資料驗證。它適用於 Node.js 和常規 JavaScript。

它可用於前端應用程式以及伺服器端程式設計。它還與許多流行的 JavaScript 庫相容,包括 React 和 TypeScript。

該庫提供了一個圍繞 JavaScript 中原生 Date 物件的 API。這樣,我們就不必與原始的 Date API 互動或更改它。

Moment 庫易於學習,而且還支援多種語言。所以它可以很容易地解決我們的國際化問題。

此時,庫處於維護模式。它仍然很穩定,所有方法都按預期工作。

然而,創作者決定停止釋出新版本。如果你習慣了 Moment 並想將它用於你的 React 應用程式,你可以自由地這樣做。

那些關心他們應用程式的長期未來的人可能想要考慮其他 JavaScript 日期庫。

在 React 中如何使用 Moment.js

因為 Moment.js 是一個外部庫,我們必須將它安裝在我們的專案資料夾中。當我們這樣做的時候,我們也可以安裝 react-moment 包,我們將在後面討論。

如果我們的應用需要時區功能,建議同時安裝 moment-timezone

npm install --save moment moment-timezone

一旦我們完成安裝包,我們必須匯入它們。找到我們打算使用它們的檔案並匯入它們:

import moment from 'moment'
import Moment from 'react-moment'
import 'moment-timezone'

我們將 Moment 大寫,因為它是專門為該庫中的日期操作而建立的 React 元件。

Moment.js 實際示例

讓我們看一個在 React 中使用 Moment 庫的示例。

let momentObject = moment()

在這個例子中,我們返回一個簡單的 moment 物件,代表程式碼的執行時間。Moment 庫包括許多其他更有趣的方法。

例如,.add() 方法可以通過新增特定的時間來改變物件。讓我們看一個例子:

moment().add(10, 'days')

正如我們所見,.add() 方法的第一個引數指定數量,第二個引數是指定時間段所必需的。我們可以將多個方法連結在一起,例如:

moment().add(10, 'days').add(1, 'months')

此程式碼將在 moment() 函式返回的日期上再增加一個月。

react-moment

react-moment 基於 moment 包,但在元件中提供相同的功能。讓我們看一個示例,我們必須將字串格式化為日期。

import React  from 'react';
import Moment from 'react-moment';

class App extends React.Component {
    render() {
        return (
            <Moment>{'1996-07-21T11:55-5500'}</Moment>
        );
    }
}
export default App

或者,我們可以使用 Moment 元件上的 date 屬性來傳遞字串。日期甚至不必是字串 - 它可以是陣列、物件或 Date 物件的例項。

Moment 元件提供了一種在 React 應用程式中使用 Moment 庫的核心功能的簡單方法。該元件接受許多 props,例如:dateformattrim 等等。

有關詳細資訊,請檢視官方文件

其他可行的選擇

Moment 庫並不是唯一在 JavaScript 中處理日期的庫。date-fns 之類的軟體包提供了一個很好的選擇。

它具有資訊豐富的文件和與 Moment 庫一樣多的功能。這個庫中的每個函式都有文件記錄。

它們的名稱易於使用,使函式的目的易於理解。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn