Question

我试图在React中呈现整个页面，然后将其发送到浏览器。我收到以下错误：

不变违规：标记无效：<!doctype html>

产生此错误的行是ReactDOMServer.renderToString(el);：

fs.readFile('./public/index.html',"utf8", function (err, data){
    /*res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
    res.write(data);
    res.end();*/
    var el = React.createElement(data);
    console.log("React element was successfully created!");
-----> var html = ReactDOMServer.renderToString(el);
    res.send(html);
  });

html文件的方式如下：

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    ...
    <title>React App</title>
 </head>
 <body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js" charset="utf-8">
</script>
</body>
</html>

如何修复错误？任何建议都将不胜感激。

更新

我尝试执行以下操作：

var mainData = prepareDataForScatterChart(result);
  const html = ReactDOMServer.renderToString(`<App 
  mainData=${mainData}/>`);
  fs.readFile('./public/index.html',"utf8", function (err, data){
  const document = data.replace(/<div id="app"><\/div>/, `<div 
  id="app">${html}</div>`);
  res.send(document);

错误消失了，但是在我加载页面后，有错误意味着数据没有传递给App。

更新

我通过添加babel-node让它在服务器上工作，但浏览器仍然以某种方式获取数据。因此，在App中，我打印出mainData，它位于node控制台中，但在浏览器中显示为undefined。这是我现在使用的代码：

const html = ReactDOMServer.renderToString(<App mainData={mainData}/>);

Answer 1

inline void check_size_nonnegative(IntArrayRef size) {
  for (auto x: size) {
    TORCH_CHECK(x >= 0, "Trying to create tensor with negative dimension ", x, ": ", size);
  }
}

除非有充分的理由，否则不需要使用import React from 'react'; import { renderToString } from 'react-dom/server'; // import your app component containing the html structure. import App from './App.jsx'; // Get your data as required. const mainData = {}; res.send( renderToString(`<!DOCTYPE html>${<App mainData={mainData}/>}`) );加载静态html文件并使用fs。

Answer 2

我正在使用流式变体。

您可以执行此操作（使用express和react-dom，但应适用于任何流）：

function streamingRender(code, res, component) {
  res.status(code)
  res.write("<!DOCTYPE html>")
  renderToNodeStream(component).pipe(res)
}

React：服务器端呈现，不变违规：无效标记：

2 个答案: