將 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,例如:date
。format
、trim
等等。
有關詳細資訊,請檢視官方文件。
其他可行的選擇
Moment 庫並不是唯一在 JavaScript 中處理日期的庫。date-fns
之類的軟體包提供了一個很好的選擇。
它具有資訊豐富的文件和與 Moment 庫一樣多的功能。這個庫中的每個函式都有文件記錄。
它們的名稱易於使用,使函式的目的易於理解。
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