Question

我正在学习通过一些教程来构建Gatsby网站。我正在使用盖茨比2.13.50（CLI：2.7.14）。通常，这些教程教我们构建基本模板。当我打开开发工具进行控制台操作时，除了此警告外，它加载得很好：

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

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

我的layout.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

如上所述，除了在开发工具控制台中发出很长时间的警告外，它都有效。

我已经在Google上进行了搜索，但还没有发现这种情况如何发生以及如何避免这种情况。我发现有一个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

我应该如何解决此警告？

Answer 1

创建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;

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

1 个答案: