反应18: 水合作用失败，因为初始 UI 与服务器上呈现的内容不匹配
我试图让 SSR 工作在我的应用程序，但我得到了错误:
水合作用失败，因为初始 UI 不匹配 呈现在服务器上。
现场演示代码是 给你
问题的现场演示是 给你(打开开发工具控制台查看错误) :
//App.js
import React from "react";
class App extends React.Component {
head() {
return (
<head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<title>React App</title>
</head>
);
}
body() {
return (
<body>
<div className="App">
<h1>Client says Hello World</h1>
</div>
</body>
);
}
render() {
return (
<React.Fragment>
{this.head()}
{this.body()}
</React.Fragment>
)
}
}
export default App;
//index.js
import React from "react";
import * as ReactDOM from "react-dom/client";
import { StrictMode } from "react";
import App from "./App";
// const container = document.getElementById("root");
const container = document.getElementsByTagName("html")[0]
ReactDOM.hydrateRoot(
container,
<StrictMode>
<App />
</StrictMode>
);
实时演示中显示的 Html 模板由后端提供，并使用以下代码生成:
const ReactDOMServer = require('react-dom/server');
const clientHtml = ReactDOMServer.renderToString(
<StrictMode>
<App />
</StrictMode>
)
//向客户端提供 clientHtml
我需要动态生成 <head></head> and <body></body>部分，如 App 类中所示
最佳答案