React 16：警告：期望服务器 HTML 在 body 中包含匹配的 div

reactjs 服务器

1个回答

写回答

大风吹倒梧桐树

2025-07-08 23:50

+ 关注

服务器

React 16：警告：期望服务器 HTML 在中包含匹配的

React是一种流行的JavaScript库，用于构建用户界面。它使用组件化的开发方式，使得构建复杂的界面变得更加简单和可维护。React 16是React库的最新版本，它引入了一些新的功能和改进。

然而，使用React 16时，开发人员可能会遇到一个警告，即“期望服务器HTML在中包含匹配的

”。这个警告的意思是，在服务器渲染时，React期望在HTML的标签中找到一个与React组件树中的根组件相匹配的

元素。

为了更好地理解这个警告，让我们来看一个简单的例子。假设我们有一个React组件App，它的根元素是一个

，包含了一些子组件和内容。

Javascript
import React from 'react';
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, React!</h1>
        This is a simple example of a React component.
      </div>
    );
  }
}
export default App;

在客户端渲染时，我们可以将这个组件渲染到HTML文档的任何位置，只需确保有一个匹配的

元素即可。

然而，在服务器渲染时，情况就有所不同。React希望在服务器渲染的HTML文档的标签中找到一个与根组件相匹配的

元素。这是因为在服务器渲染时，React需要将组件的HTML结构嵌入到服务器生成的HTML文档中，并确保客户端渲染时能够正确地进行挂载和更新。

如果在服务器渲染时找不到匹配的

元素，React就会发出上述警告。为了解决这个问题，我们需要确保服务器生成的HTML文档中包含一个与根组件相匹配的

元素。

现在，让我们来看一下如何在服务器端使用React进行渲染，并解决这个警告问题。

首先，我们需要使用Node.JS来创建一个简单的服务器。我们可以使用Express框架来实现这一点。以下是一个基本的服务器文件server.JS的示例代码：

Javascript
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');
const app = express();
app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(<code>
    <html>
      <head>
        <title>React Server Rendering</title>
      </head>
      <body>
        <div id="root">${html}</div>
      </body>
    </html>
  </code>);
});
app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

在上面的代码中，我们首先导入了必要的模块，包括Express、React和ReactDOMServer。然后，我们创建了一个Express应用程序，并定义了一个路由处理程序，用于处理根路径的GET请求。

在路由处理程序中，我们使用ReactDOMServer的renderToString方法将根组件App渲染为HTML字符串。然后，我们将这个HTML字符串嵌入到服务器生成的HTML文档中，并在标签中添加了一个具有id为"root"的

元素。

最后，我们启动服务器，并监听在端口3000上。

现在，当我们访问服务器的根路径时，React组件将在服务器端进行渲染，并将结果作为HTML响应发送给客户端。同时，我们也解决了React 16警告中提到的问题，确保服务器生成的HTML文档中包含了匹配的

元素。

React 16在服务器渲染时要求HTML文档中包含一个与根组件相匹配的

元素。如果在服务器渲染时找不到匹配的

元素，React会发出警告。为了解决这个问题，我们需要在服务器生成的HTML文档中添加一个与根组件相匹配的

元素。通过使用ReactDOMServer的renderToString方法将组件渲染为HTML字符串，并将其嵌入到服务器生成的HTML文档中，我们可以解决这个警告，并实现React的服务器渲染。

举报有用（4）分享收藏

React 16：警告：期望服务器 HTML 在 body 中包含匹配的 div

1个回答

大风吹倒梧桐树

热门话题

相关问题