ReactJS 同构应用和系统服务器时间答案

【问题标题】：ReactJS isomorphic application and system server timeReactJS 同构应用和系统服务器时间
【发布时间】：2016-04-25 11:58:57
【问题描述】：

我想知道在同构React 应用程序中输出基于system（服务器端）的日期/时间的良好做法是什么。确实有很多方法（ajax，环境验证等），但问题是关于真正的实践。

例如：目标是在商标的页脚中输出当前年份。

仅供参考：我正在使用react-router 模块，所以渲染看起来像这样： ReactDOMServer.renderToString(<RoutingContext {...renderProps} />)

更新： 如果我尝试使用 Route 这样的道具：

match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
   //...
   if (renderProps) {
      renderProps.params.year = (new Date).getFullYear();
      res.status(200).send(ReactDOMServer.renderToString(<RoutingContext {...renderProps} />));
   }
   //...
});

在 jsx 内部：

<Footer year={ this.props.params.year } />

但出现以下错误：

未捕获的错误：不变违规：您正在尝试渲染使用服务器呈现的文档组件，但校验和是无效的。这通常意味着您渲染了不同的组件类型或客户端上的道具来自服务器上的道具，或者您的 render() 方法不纯。

我们将非常感谢您的帮助！

【问题讨论】：

标签： javascript datetime reactjs react-router isomorphic-javascript

【解决方案1】：

编辑：作者更新了他的问题，这个回复不再有效。

非常简单，Date 对象在每个浏览器和 nodejs 上都可用

render() {
  return <footer>{new Date().getUTCFullYear()} [c] MyCompany Inc.</footer>
}

如果你想要服务器端日期，那么

class Footer extends React.Component {
  render() {
    return <footer>{this.props.date} [c] MyCompany Inc.</footer>
  }
}

ReactDOM.renderToString(<Footer date={new Date().getUTCFullYear()} />);

【讨论】：

没有。一旦呈现，浏览器日期将被呈现。我需要服务器端日期。
@OlegMeleshko 那么你应该在你的问题中指定它。您的问题与服务器无关。服务器 =/= 系统。
@OlegMeleshko 同构不代表服务器端
@OlegMeleshko Isomorphic 意味着能够在服务器和客户端上运行。如果要保证日期来自服务器，那么就不应该实现同构的解决方案，而应该是服务器端的解决方案。
更新了问题。

【解决方案2】：

您可以通过 AJAX 请求获取服务器时间标头：

getServerTime(){
    var xmlHttp;
    try {
        //FF, Opera, Safari, Chrome
        xmlHttp = new XMLHttpRequest();
    }
    catch (err1) {
        //IE
        try {
            xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (eerr3) {
                //AJAX not supported, use CPU time.
                alert("AJAX not supported");
            }
        }
    }
    xmlHttp.open('HEAD',window.location.href.toString(),false);
    xmlHttp.setRequestHeader("Content-Type", "text/html");
    xmlHttp.send('');
    return xmlHttp.getResponseHeader("Date");
}

然后以这种方式获得年份：

new Date(this.getServerTime()).getFullYear()

注意：我假设：

您的服务器使用正确的标头响应 AJAX 请求。
您在一个类中进行渲染。否则只需在方法前添加functon，并在调用getServerTime(). 时删除this.

【讨论】：

【解决方案3】：

最后我不得不将我的 React 顶级组件分成两部分：静态标记和 React 渲染字符串。

很遗憾，由于React Invariant Violation，任何数据都不可能以不同的方式呈现，因此组件类型甚至道具都应该以相同的方式呈现。

现在可以在页面中包含任何服务器端的独特内容（使用任何模板引擎直接粘贴到静态标记中）。

【讨论】：