admin管理员组

文章数量:1355535

I am trying to use <body> tag but getting following warning:

Warning: validateDOMNesting(...): <body> cannot appear as a child of <div>.
body
Body
App index.js:1
    e index.js:1
    React 16
        printWarning
        error
        validateDOMNesting
        createInstance
        pleteWork
        pleteUnitOfWork
        performUnitOfWork
        workLoopSync
        renderRootSync
        performSyncWorkOnRoot
        scheduleUpdateOnFiber
        updateContainer
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
    js index.js:9
    js main.chunk.js:1941
    Webpack 7
        __webpack_require__
        fn
        1
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>

Following are my App.js and Body.js files:

App.js

import React from "react";
import Navbar from "./ponents/Header/Navbar/Navbar";
import Footer from "./ponents/Footer/Footer";
import Body from "./ponents/Body/Body";
import "./App.css";

const App = () => {
  return (
    <>
      <Navbar />
      <Body />
      <Footer />
    </>
  );
};

export default App;

Body.js

import React from "react";
import HomeScreen from "../../screens/HomeScreen/HomeScreen";

const Body = () => {
  return (
    <body>
      <HomeScreen />
    </body>
  );
};

export default Body;

I am using React Version: ^17.0.2

I am trying to use <body> tag but getting following warning:

Warning: validateDOMNesting(...): <body> cannot appear as a child of <div>.
body
Body
App index.js:1
    e index.js:1
    React 16
        printWarning
        error
        validateDOMNesting
        createInstance
        pleteWork
        pleteUnitOfWork
        performUnitOfWork
        workLoopSync
        renderRootSync
        performSyncWorkOnRoot
        scheduleUpdateOnFiber
        updateContainer
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
    js index.js:9
    js main.chunk.js:1941
    Webpack 7
        __webpack_require__
        fn
        1
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>

Following are my App.js and Body.js files:

App.js

import React from "react";
import Navbar from "./ponents/Header/Navbar/Navbar";
import Footer from "./ponents/Footer/Footer";
import Body from "./ponents/Body/Body";
import "./App.css";

const App = () => {
  return (
    <>
      <Navbar />
      <Body />
      <Footer />
    </>
  );
};

export default App;

Body.js

import React from "react";
import HomeScreen from "../../screens/HomeScreen/HomeScreen";

const Body = () => {
  return (
    <body>
      <HomeScreen />
    </body>
  );
};

export default Body;

I am using React Version: ^17.0.2

  • javascript
  • reactjs
  • jsx
Share Improve this question asked May 26, 2021 at 7:08 Ankush DograAnkush Dogra 2351 gold badge3 silver badges14 bronze badges 2
  • Well it seems to be exactly what the error message says. You can't render a <body/> tag inside a <div/> tag. How are you rendering the <App/>? – Jayce444 Commented May 26, 2021 at 7:13
  • This question is related to how HTML works and OP needs to read the manual. Body is not a random tag to throw in the middle of your app like a div or span. – Silviu Burcea Commented May 26, 2021 at 7:17
Add a ment  | 

3 Answers 3

Reset to default 2

body must be the second element of an HTML element. It can't be the child element of anything else. So maybe change how you approach things:

const App = () => {
  return (
    <>
      <Navbar />
      <Content />
      <Footer />
    </>
  );
};

And:

const Content = () => {
  return (
    <main>
      <HomeScreen />
    </main>
  );
};

You should remove the body tag wrapper from the body.jsx, it causes the body tag to render insider a div which is the reason for the error, body tag should always be the child of the HTML tag only.

All the elements you add in the App.js file will render inside the body tag unless you change either the element to render inside in the index.js or assign the id root to any other element in index.html

import React from "react";
import HomeScreen from "../../screens/HomeScreen/HomeScreen";

const Body = () => {
  return (
    <>
      <HomeScreen />
    </>
  );
};

export default Body;

Like the error message says, you can't use <body> inside a <div> tag (or any other). The body of the application is already defined in the index.html file.

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

You could place your body ponent inside a <div> tag that you use as a body for content.

import React from "react";
import HomeScreen from "../../screens/HomeScreen/HomeScreen";

const Body = () => {
  return (
    <div>
      <HomeScreen />
    </div>
  );
};

export default Body;

Or you could use a fragment.

import React from "react";
import HomeScreen from "../../screens/HomeScreen/HomeScreen";

const Body = () => {
  return (
    <React.Fragment>
      <HomeScreen />
    </React.Fragment>
  );
};

export default Body;

Or simply:

import React from "react";
import HomeScreen from "../../screens/HomeScreen/HomeScreen";

const Body = () => {
  return (
    <>
      <HomeScreen />
    </>
  );
};

export default Body;

本文标签：

版权声明：本文标题：javascript - Warning: validateDOMNesting(...): &lt;body&gt; cannot appear as a child of &lt;div&gt; in React.js 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743942350a2565794.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。