Javascript ReactJS同构应用程序和系统服务器时间

我想知道在同构的

React

应用程序中输出基于

system

（服务器端）的日期/时间的最佳实践是什么。实际上有很多方法（ajax、环境验证等），但问题在于如何进行真正的实践

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

FYI:我正在使用

react-router

模块，因此呈现如下：

ReactDOMServer.renderToString（）

更新： 如果我试图使用

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} />));
   }
   //...
});

match（{routes，location:req.url}，（error，redirectLocation，renderProps）=>{
//...
如果（渲染器操作）{
renderProps.params.year=（新日期）.getFullYear（）；
res.status（200）.send（ReactDOMServer.renderToString（））；
}
//...
});

在jsx内部：

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

但出现以下错误：

未捕获错误：不变冲突：您正在尝试渲染 使用服务器呈现将组件添加到文档中，但校验和无效 无效的这通常意味着您渲染了不同的组件类型或 客户端上的道具，或您的render（）上的道具 方法不纯

---

我们将非常感谢你的帮助

编辑：作者更新了他的问题，此回答不再有效。

---

非常简单，每个浏览器和节点上都有日期对象

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

render（）{
返回{new Date（）.getUTCFullYear（）}[c]MyCompany Inc。
}

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

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

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

类页脚扩展React.Component{
render（）{
返回{this.props.date}[c]MyCompany Inc。
}
}
ReactDOM.renderToString（）；

最后，我不得不将React顶级组件分为两部分：静态标记和

React

呈现字符串

不幸的是，由于

React不变量冲突

不可能以不同的方式呈现任何数据，因此组件类型甚至道具都应该以相同的方式呈现

---

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

您可以通过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.
。

---

否。渲染后，将立即渲染浏览器日期。我需要服务器端日期。@OlegMeleshko那么您应该在问题中指定。你的问题没有提到服务器。服务器=/=系统。@OlegMeleshko同构并不意味着服务器-side@OlegMeleshko同构意味着能够在服务器和客户端上运行。如果要保证日期来自服务器，则不应实现同构解决方案，而应实现服务器端解决方案。更新了问题。