ReactJS無效的校驗和

嘗試使用ReactJS &節點進行服務器端渲染時，我不斷收到以下錯誤。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);

來源

2014-10-03 Nael

變化

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

到

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

並且通知消失。

Screenshot

來源

2014-10-03 02:31:34

有時，它是如此簡單。謝謝。你怎麼知道答案這麼快？ – Nael 2014-10-03 02:41:09

我有一個預感，所以我玩了它。 :)事後看來，'document.documentElement' *是HTML元素，'document' *包含* it，而React呈現爲元素 - 所以如果你想呈現'html'標籤，你必須渲染到它的容器。 – 2014-10-03 02:42:34

偉大的迴應。再次感謝你！ – Nael 2014-10-03 02:44:14

ReactJS無效的校驗和

回答

相關問題