在 React JS 中显示当前日期和时间 - JavaScript

欢迎来到本教程，本文将向您展示如何在 React JS 应用程序中显示当前日期和时间。

步骤 1 - 导入 moment.js 库

moment.js 是一个 JavaScript 日期库，它使日期和时间处理变得更加容易。Moment.js 是一个轻量级库，可以在 React 应用程序中很好地工作。

您可以使用以下命令安装 moment.js：

npm install moment --save

步骤 2 - 导入 moment.js 库

将 Moment.js 库导入您的组件：

import Moment from 'moment';

步骤 3 - 创建一个日期和时间组件

现在，我们将创建一个 React 组件来显示日期和时间。将以下代码添加到您的组件中：

class DateTime extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: Moment().format('MMMM Do YYYY, h:mm:ss a') };
  }
  render() {
    return (
      <div>
        <h1>{ this.state.time }</h1>
      </div>
    );
  }
}

在此代码中，我们使用 Moment.js 库设置时间的格式（我们选择 'MMMM Do YYYY, h:mm:ss a'）。然后，我们将格式化的日期和时间字符串存储在组件的状态中。最后，我们将日期和时间字符串渲染到组件的 div 元素中。

步骤 4 - 渲染日期和时间组件

最后，在您的应用程序中渲染日期和时间组件：

ReactDOM.render(
  <DateTime />,
  document.getElementById('root')
);

您的组件现在可以在 React 应用程序中显示当前日期和时间！

结论

这就是使用 Moment.js 在 React JS 应用程序中显示当前日期和时间的方法 。Moment.js 是一个轻量级但功能强大的 JavaScript 日期库，它可以处理各种日期和时间格式。在本教程中，我们向您展示了如何使用 Moment.js 创建一个 React 组件，以在您的应用程序中显示当前日期和时间。