时间戳

首页 > 解决方案 > Gatsby 警告：validateDOMNesting(...)：不能作为子级出现

javascript - Gatsby 警告：validateDOMNesting(...)：不能作为子级出现

问题描述

我正在学习使用几个教程构建 Gatsby 网站。我正在使用 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

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

我已经用谷歌搜索了这个，但还没有发现这是如何发生的以及如何避免它。我发现有一个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

我应该如何解决这个警告？

标签： javascriptgatsby

解决方案

  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>
 );

    } }

  2. 更新src/components/layout.js

     import React from 'react';

 const Layout = (props) => {
   return <>{props.children}</>;
 };

 export default Layout;

推荐阅读