警告：预期的服务器 HTML 在 <div> 中包含匹配的 <body>
Posted
技术标签:
【中文标题】警告：预期的服务器 HTML 在 <div> 中包含匹配的 <body>【英文标题】：Warning: Expected server HTML to contain a matching <body> in <div> 【发布时间】：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。
【参考方案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> 将多个标签包装在一个有效的“无操作”标签中。以上是关于警告：预期的服务器 HTML 在 <div> 中包含匹配的 <body>的主要内容，如果未能解决你的问题，请参考以下文章
Next.js - 预期的服务器 HTML 在 <div> 中包含匹配的 <div>