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