警告：预期的服务器 HTML 在 <div> 中包含匹配的 <body>答案

【问题标题】：Warning: Expected server HTML to contain a matching <body> in <div>警告：预期的服务器 HTML 在 <div> 中包含匹配的 <body>
【发布时间】：2020-07-04 21:59:48
【问题描述】：

我在控制台中收到上述警告。我不明白为什么。我在index.js 文件中有两个匹配的<body> 标签。完整的警告是 -

Warning: Expected server HTML to contain a matching <body> in <div>.
    in body (at pages/index.js:12)
    in div (at pages/index.js:11)
    in div (at pages/index.js:7)
    in Index (at _app.js:8)
    in MyApp
    in Container (created by AppContainer)
    in AppContainer

按照我正在使用的 index.js 文件。我正在使用 Next.js 和 tailwindcss。

import Head from "next/head"
import SideNavbar from "../components/SideNavbar"
import MainPage from "../components/MainPage"

const Index = () => {
  return (
    <div className="mx-auto">
      <Head>
        <title>Manchester United</title>
      </Head>
      <body className="min-h-screen">
        <div className="flex flex-row">
          <SideNavbar />
          <MainPage>
            <div className="text-center px-2 py-6 text-5xl font-bold text-gray-200">
              Manchester United
            </div>
          </MainPage>
        </div>
      </body>
    </div>
  )
}

export default Index

如果我用<div> 标记替换<body> 标记，警告就会消失。我使用的两个自定义组件<SideNavbar /> 和<MainPage />，没有使用任何<body> 标签。

【问题讨论】：

在你的 _document.js 中你必须有 div 即<body> <Main /> <NextScript /> </body> 所以Main 不能通过你的 _app.js 有另一个 body 标签
我没有_document.js 文件。我使用npm init next-app 创建了这个应用程序。我确实有一个 _app.js 文件，我必须创建它才能使用 tailwindcss。

标签： javascript html reactjs next.js

【解决方案1】：

随着 React 的工作，您的 React 应用程序被“注入”到您在 ReactDOM.render 定义的 HTML 元素中：

ReactDOM.render(<App />, document.getElementById('root'));

但是，这个元素已经是<body>元素的子元素了。

警告：validateDOMNesting(...)：<body> 不能作为<div> 的子项出现。

您的错误只是同一事物的变体，但作为服务器端呈现 (Next.js) 错误。

通过使用Next.js，此 HTML 对您隐藏（检查所附代码和框中“vanilla”示例中的 HTML）。

另外，您可以在开发工具中的source 选项卡中检查 DOM 树，您会注意到存在两个<body> 元素。

这是一个演示错误的小代码框代码：

【讨论】：

啊！所以，我不需要在任何地方使用<body> 标签。我可以继续使用<div>，因为<body> 已经封装了所有内容，对吧？

【解决方案2】：

您的 HTML 不正确。 div-Tag 内不能有 body-Tag。一个基本的 HTML 结构如下所示

<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div></div>

</body>
</html>

【讨论】：

我明白了。但在反应中，return 语句应该包含在一个 <div> 元素中。否则我会得到一个编译错误。我在上面的代码中删除了Index 组件中最上面的<div>，然后我得到了以下错误-SyntaxError: /home/akshaj/projects_js/man-utd-explorer/pages/index.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (10:6) 。
@theairbend3r 您不能从反应组件返回多个顶级 html 标记/组件。为了解决这个问题，您可以使用<React.Fragment>...</React.Fragment> 将多个标签包装在一个有效的“无操作”标签中。