Nik*_*nko 6 javascript server-side reactjs
我试图渲染整个页面，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}/>);
小智 2
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}/>}`)
);
使用fs加载静态 html 文件并使用replace()是不必要的，除非您有令人信服的理由这样做。
| 归档时间： |
|
| 查看次数： |
5154 次 |
| 最近记录： |