ReactJS 校验和无效答案

【问题标题】：ReactJS Invalid ChecksumReactJS 校验和无效
【发布时间】：2014-11-28 03:00:12
【问题描述】：

尝试使用 ReactJS 和节点进行服务器端渲染时，我不断收到以下错误。

React attempted to use reuse markup in a container but the checksum was invalid.

我看到answer 在服务器和客户端上传递相同的道具解决了这个问题。在我的示例中，我没有任何道具，所以我不确定答案是否适用于我的问题。

您可以在我的github 帐户上查看我的完整示例。

我将包含下面的重要代码。非常感谢任何见解。

JSX

/** @jsx React.DOM */
var React = require('react');
var index = React.createClass({
    render: function() {
        return (
          <html>
          <head>
            <script src="bundle.js"></script>
          </head>
          <body>
            <div>
              hello
           </div>
          </body>
         </html>
     );
   }
});

if (typeof window !== "undefined") {
  React.renderComponent(<index/>, document.documentElement);
} else {
  module.exports = index;
}

服务器

require('node-jsx').install();
var express = require('express'),
    app     = express(),
    React = require('react'),
    index = require('./index.jsx');

var render = function(req, res){
  var component = new index();
  var str = React.renderComponentToString(component);
  res.set('Content-Type', 'text/html');
  res.send(str);
  res.end();
}

app.get('/',render);
app.use(express.static(__dirname));

app.listen(8080);

【问题讨论】：

标签： reactjs

【解决方案1】：

改变

React.renderComponent(<index/>, document.documentElement);

到

React.renderComponent(<index/>, document);

通知消失了。

【讨论】：

有时候，事情就是这么简单。谢谢你。你怎么这么快就知道答案了？
我有一种预感，所以我玩弄了它。 :) 事后看来，document.documentElement 是 HTML元素，document 包含它，React渲染成元素——所以如果你想渲染html标签，你必须渲染到它的容器中。
反响很好。再次感谢您！
如果您渲染到 div 而不是渲染到 <html>，则适用类似的答案——您需要创建一个包装器 div 并渲染到其中。