Question

请帮助我理解我的问题。

我在服务器 -side（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>

在客户端 -side：

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'));

有关详细信息，请参阅How to Implement Node + React Isomorphic JavaScript & Why it Matters。

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);
};

另外，您可以使用简单的同构应用程序示例查看this repo。

ReactJS服务器端呈现问题

2 个答案: