如何使用客户端时区在 React SSR 呈现页面中格式化时间？答案

【问题标题】：How to format time in React SSR rendered page using client time zone?如何使用客户端时区在 React SSR 呈现页面中格式化时间？
【发布时间】：2018-06-15 23:53:39
【问题描述】：

我正在使用 React 构建网站，最近转而使用服务器端渲染 (SSR) 以提高性能。我在此更改后遇到的一个问题是，当我在页面上设置时间格式时（我使用的是 Moment.js），它使用服务器的时区错误地呈现。

如何使用客户端的时区格式化时间？我是否需要在服务器响应上留出时间，然后让客户端呈现？

【问题讨论】：

标签： reactjs server-side-rendering

【解决方案1】：

我是否需要在服务器响应上留出时间，然后让客户端呈现？

不幸的是。

您可以构建一个实用程序组件来减少繁琐。

// utility
import React, { Component } from 'react';

export default class ClientRender extends Component {
  state = { isMounted: false };

  componentDidMount () {
    this.setState({ isMounted: true });
  }

  render () {
    const { children } = this.props;
    const { isMounted } = this.state;

    return isMounted ? children : null;
  }
}

// in your app
import React from 'react';
import moment from 'moment';

import ClientRender from './path/to/client-render';

export default function MyComponent (props) {
  return (
    <div>
      <ClientRender>{moment(props.timeUTC * 1000).format('LLL')}</ClientRender>
    </div>
  );
}

【讨论】：

为什么不在状态中使用默认时区呈现服务器端并将客户端时区设置为componentDidMount中的状态？
@coreyward 宁愿从不向用户显示可能是错误的时间。
@LironYahdav 发生这种情况的唯一情况是他们禁用了 JavaScript，在这种情况下，此解决方案将不起作用。
也许我解释得不够清楚。我的意思是我不想用默认时区呈现服务器端，因为这意味着最终用户会在短时间内看到时间格式可能不正确的时区。该默认时区无法对所有用户都正确。启用 JS 时会发生这种情况。

【解决方案2】：

具体来说，我没有用 React 做到这一点，但一般的方法是使用包含时区的完整日期/时间格式呈现 <time> 元素 (documentation here)，然后调整文本输出客户端-边。

当您在客户端补水时，这应该相当简单； react-moment 也接受 timezone 如果您根据请求在服务器端呈现...

【讨论】：

【解决方案3】：

我也有同样的问题。

您可以尝试的一件事是将时区设置为客户端的 cookie。

客户的第一次访问总是一个问题，因此请准备好使用默认时区或延迟渲染（使用 didMount 事件）。

但是一旦客户端返回该 cookie，您可以使用该 cookie 值作为日期和时间字符串呈现的时区。

还没有尝试过，如果我成功了，我会考虑更新那个帖子

【讨论】：