使用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);
答案 0 :(得分:13)
更改
React.renderComponent(<index/>, document.documentElement);
到
React.renderComponent(<index/>, document);
并且通知消失了。