ReactJS服务器端渲染问题

Question

请帮助我了解我的问题。

我在服务器端（Node.js）上具有以下内容：

var React = require('react');
var ReactDOMServer = require('react-dom/server');

var TestComponent = React.createClass({
  render : function() {
    return <div>test</div>
  }
});

// express router callback..
function(req, res, next) {
  res.send(ReactDOMServer.renderToString(TestComponent));
};

响应示例：

<div data-reactid=".2e2hyaaz0n4" data-react-сhecksum="1124798100">test</div>

在客户端 -

ReactDOM.render(React.createElement(template), document.getElementById('container'));

我在浏览器控制台中遇到以下错误：

Uncaught Invariant Violation: Invalid tag: <div data-reactid=".2e2hyaaz0n4" data-react-checksum="1124798100">test</div>

任何帮助将不胜感激！

Answer 1

如果template包含字符串

'<div data-reactid=".2e2hyaaz0n4" data-react-сhecksum="1124798100">test</div>'

那么这是不正确的。 您永远不能像呈现JSX一样呈现纯HTML。 相反，您应该在呈现服务器时将其作为页面源的一部分包含在服务器呈现的HTML中，然后使用与服务器上使用的相同的道具初始化客户端React应用程序。

因此，例如，使用EJS模板引擎：

// In Express

function(req, res, next) {
  var reactHtml = ReactDOMServer.renderToString(<TestComponent />);
  res.render('index.ejs', {reactOutput: reactHtml});
};

<!-- In a template somewhere -->
<div id="container"><%- reactOutput %></div>

// In a client-side JavaScript file

var TestComponent = React.createClass({
  render : function() {
    return <div>test</div>
  }
});

ReactDOM.render(<TestComponent />, document.getElementById('container'));

有关更多信息，请参见如何实现节点+ React同构JavaScript及其重要性。

Answer 2

代码的问题在于，您只发送了一个div标签而没有真实的文档。 这意味着在服务器上，您应该编写如下内容：

function(req, res, next) {
  const component = ReactDOMServer.renderToString(TestComponent);

  const layout = `<!DOCTYPE html>
    <html>
      <head lang="en">
        <meta charSet="utf-8"/>
        <title>Isomorphic app</title>
      </head>
      <body>
        <div id="container">${component}</div>
      </body>
    </html>`;

  res.send(layout);
};

您也可以使用简单的同构应用示例查看此存储库。

Answer 3

您正在尝试将组件安装在具有id container的元素上。

ReactDOM.render(React.createElement(template), document.getElementById('container'));

但是您错过了在服务器端呈现的组件中添加具有id 容器的元素的功能。
要实现此目的，请使用Jade之类的模板。

div(class="container")

renderHTMLString

如果您要替换整个机身，只需添加此客户端即可。

ReactDOM.render(React.createElement(template), document.getElementsByTagName('body')[0]);

ReactJS服务器端渲染问题

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-01-09 09:00:42

解决方案2
0 2016-01-09 09:02:22

解决方案3
0 2017-05-08 13:56:55

ReactJS服务器端渲染问题

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-01-09 09:00:42

解决方案2 0 2016-01-09 09:02:22

解决方案3 0 2017-05-08 13:56:55

解决方案1
1 已采纳 2016-01-09 09:00:42

解决方案2
0 2016-01-09 09:02:22

解决方案3
0 2017-05-08 13:56:55