如何在反应中将时间转换为用户时区 - Javascript

在Web应用程序中，时间通常以服务器时区的形式存储和显示。这意味着当用户从不同的时区访问您的应用程序时，他们将看到不同的时间。为了解决这个问题，我们需要将时间转换为用户的时区。 在本教程中，我们将介绍如何在反应应用程序中使用Moment.js库将时间转换为用户时区。

步骤1：安装Moment.js

首先，在反应应用程序中安装Moment.js库。可以使用NPM来安装它。

npm install moment --save

步骤2：准备时间数据

在开始编写代码之前，我们需要准备一些时间数据以进行测试。在此示例中，我们将使用当前日期和时间。

const now = moment();

步骤3：将时间转换为用户时区

接下来，我们需要将时间转换为用户时区。为此，请使用Moment.js的tz函数，并传递用户的时区偏移量作为参数。偏移量可以使用JavaScript的getTimezoneOffset函数计算。

const userOffset = new Date().getTimezoneOffset();
const userZone = moment.tz.guess();
const userTime = now.clone().utcOffset(userOffset).tz(userZone).format();

在上面的代码中，我们首先获取用户的时区偏移量，然后使用Moment.js的tz.guess函数获取用户的时区。接下来，我们使用utcOffset函数将时间转换为UTC时间，然后使用tz函数将其转换为用户时区。最后，我们使用format函数将时间转换为字符串，以供显示。

步骤4：完整代码示例

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

class App extends React.Component {
  render() {
    const now = moment();
    const userOffset = new Date().getTimezoneOffset();
    const userZone = moment.tz.guess();
    const userTime = now.clone().utcOffset(userOffset).tz(userZone).format();
    
    return (
      <div>
        <p>Server time: {now.format()}</p>
        <p>User time: {userTime}</p>
      </div>
    );
  }
}

export default App;

总结

使用Moment.js库，将时间转换为用户时区非常简单。只需计算用户的时区偏移量，并使用tz函数将时间转换为用户时区即可。如果您的应用程序是全球化的，则考虑使用React-Intl库进行本地化处理。