Javascript 反应：服务器端呈现，不变冲突：无效标记：<；！doctype html>；_Javascript_Reactjs_Server Side

Javascript 反应：服务器端呈现，不变冲突：无效标记：<；！doctype html>；

javascript reactjs

Javascript 反应：服务器端呈现，不变冲突：无效标记：<；！doctype html>；,javascript,reactjs,server-side,Javascript,Reactjs,Server Side,我试图在React中呈现整个页面，然后将其发送到浏览器。我得到以下错误：不变冲突：无效标记：产生此错误的行是ReactDOMServer.renderToString（el）： html文件的外观如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> ... <title>React App</title> &l

我试图在

React

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

不变冲突：无效标记：

产生此错误的行是

ReactDOMServer.renderToString（el）：
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>

从“React”导入React；
从'react dom/server'导入{renderToString}；
//导入包含html结构的应用程序组件。
从“/App.jsx”导入应用程序；
//根据需要获取数据。
常量mainData={}；
res.send(
renderToString（`${}`）
);

使用fs
加载静态html文件和使用replace（）
是不必要的，除非您有充分的理由这样做。
我使用的是流媒体变体
您可以这样做（使用express
和react dom
，但应使用任何流）：
函数streamingRender（代码、分辨率、组件）{
资源状态（代码）
res.write（“”）
renderToNodeStream（组件）.管道（分辨率）
}
您正试图将该HTML页面呈现为JSX。这就是为什么
是无效的（因为这是无效的JSX）。您需要使用ReactDOMServer.renderToString将包导入服务器并呈现根组件（这里有一个例子-上面说你需要向CreateElement传递一个有效的组件我现在很难将参数传递到App
元素。我不知道Redux
…我可以用React
？@Sidney实际使用const html=ReactDOMServer.renderToString（）吗？）；我收到一个错误，它无法解析。如果在服务器代码中使用JSX，则需要传输它。我链接的示例演示了如何通过Webpack和Babel进行设置。
<!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);

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

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