盖茨比警告：validateDOMNesting(...)： <html> 不能显示为<div>

的子项。

我正在通过几个教程学习构建盖茨比网站。我正在使用盖茨比 2.13.50 (CLI： 2.7.14(。通常，这些教程会教我们构建基本模板。它加载良好，除了当我打开开发工具进行控制台时出现此警告：

Warning: validateDOMNesting(...): <html> cannot appear as a child of <div>.

警告非常非常长。我将在我的代码之后发布其余部分。

我的布局.js基本模板位于/src/components/layout.js。它看起来像这样：

import React from "react"
const Layout = (props) => {
return (
<html lang="en">
<head>
<Helmet>
<meta charSet="utf-8" />
<title>Demo</title>
</Helmet>
</head>
<body>
{props.children}
</body>
</html>
)
}
export default Layout

它由/src/pages/index.js 使用，如下所示：

import React from 'react'
import Layout from '../components/layout'
const IndexPage = () => {
return (
<Layout>
<h1>Demo onle.</h1>
<p>Hello. This totally works fine.</p>
</Layout>
)
}
export default IndexPage

如前所述，它可以工作，除了开发工具控制台中的很长的警告。

我已经用谷歌搜索过这个，但还没有发现这是如何发生的以及如何避免它。我发现有一个html.js但我不知道这是否是某种默认模板，以及我是否应该覆盖它以用作基本模板。我试过了，但性能很差，所以我认为我错了。

当我删除<html>标签时，我得到：Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.

如果我用<div>替换它，它说<body> cannot appear as a child of <div>

这是很长的警告：

Warning: validateDOMNesting(...): <html> cannot appear as a child of <div>.
in html (at layout.js:10)
in Layout (at chat.js:6)
in ChatPage (created by HotExportedChatPage)
in AppContainer (created by HotExportedChatPage)
in HotExportedChatPage (created by PageRenderer)
in PageRenderer (at json-store.js:93)
in JSONStore (at root.js:51)
in RouteHandler (at root.js:73)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by EnsureResources)
in ScrollContext (at root.js:64)
in RouteUpdates (at root.js:63)
in EnsureResources (at root.js:61)
in LocationHandler (at root.js:119)
in LocationProvider (created by Context.Consumer)
in Location (at root.js:118)
in Root (at root.js:127)
in _default (at app.js:65)
__stack_frame_overlay_proxy_console__ @ index.js:2177
warningWithoutStack @ react-dom.development.js:507
validateDOMNesting @ react-dom.development.js:8625
createInstance @ react-dom.development.js:8737
completeWork @ react-dom.development.js:16901
completeUnitOfWork @ react-dom.development.js:19143
performUnitOfWork @ react-dom.development.js:19341
workLoop @ react-dom.development.js:19353
renderRoot @ react-dom.development.js:19436
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
performSyncWork @ react-dom.development.js:20229
requestWork @ react-dom.development.js:20098
scheduleWork @ react-dom.development.js:19912
enqueueSetState @ react-dom.development.js:11170
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ index.js:104
requestAnimationFrame (async)
(anonymous) @ index.js:102
Promise.then (async)
(anonymous) @ index.js:100
(anonymous) @ history.js:70
navigate @ history.js:69
(anonymous) @ navigation.js:103
Promise.then (async)
navigate @ navigation.js:77
window.___navigate @ navigation.js:150
navigate @ index.js:213
onClick @ index.js:184
onClick @ index.js:464
callCallback @ react-dom.development.js:150
invokeGuardedCallbackDev @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:271
executeDispatch @ react-dom.development.js:562
executeDispatchesInOrder @ react-dom.development.js:584
executeDispatchesAndRelease @ react-dom.development.js:681
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:689
forEachAccumulated @ react-dom.development.js:663
runEventsInBatch @ react-dom.development.js:817
runExtractedEventsInBatch @ react-dom.development.js:825
handleTopLevel @ react-dom.development.js:4827
batchedUpdates$1 @ react-dom.development.js:20440
batchedUpdates @ react-dom.development.js:2152
dispatchEvent @ react-dom.development.js:4906
(anonymous) @ react-dom.development.js:20491
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:20490
interactiveUpdates @ react-dom.development.js:2171
dispatchInteractiveEvent @ react-dom.development.js:4883

我应该如何解决此警告？

创建pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document';
export default class CustomDocument extends Document {
render() {
<Html lang="en">
<Head>
<Helmet>
<meta charSet="utf-8" />
<title>Demo</title>
</Helmet>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);

} }

更新src/components/layout.js

import React from 'react';
const Layout = (props) => {
return <>{props.children}</>;
};
export default Layout;

您不能在div 中插入标签，它们应该在任何其他标签之前。您的索引.html已经有 HTML 正文头标签。如果您查看索引.js您的组件将在某个根div 中呈现。所以使用div 而不是正文标签和像正文一样的样式。

相关内容

最新更新

热门标签：