Javascript 警告：ValidatedMonitoring（…）：<；车身>；不能显示为<；的子级；部门>；在React.js中_Javascript_Reactjs_Jsx

Javascript 警告：ValidatedMonitoring（…）：<；车身>；不能显示为<；的子级；部门>；在React.js中

javascript reactjs

Javascript 警告：ValidatedMonitoring（…）：<；车身>；不能显示为<；的子级；部门>；在React.js中,javascript,reactjs,jsx,Javascript,Reactjs,Jsx,我试图使用标记，但收到以下警告： 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

我试图使用

标记，但收到以下警告：

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
        completeWork
        completeUnitOfWork
        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>

警告：validateDOMNesting（…）：不能显示为的子级。
身体
身体
appindex.js:1
e index.js:1
反应16
打印警告
错误
验证记忆
createInstance
完成工作
完整的工作
执行工作
workLoopSync
渲染同步
performSyncWorkOnRoot
调度更新光纤
更新容器
legacyRenderSubtreeIntoContainer
解锁更新
legacyRenderSubtreeIntoContainer
提供
js index.js:9
js main.chunk.js:1941
第7页
__需要的网页__
fn
1.
__需要的网页__
检查延迟模块
webpackJsonpCallback

以下是我的App.js和Body.js文件：

App.js

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

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

export default App;

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

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

export default Body;

从“React”导入React；
从“/components/Header/Navbar/Navbar”导入导航栏；
从“/components/Footer/Footer”导入页脚；
从“/components/Body/Body”导入正文；
导入“/App.css”；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

Body.js

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

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

export default App;

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

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

export default Body;

从“React”导入React；
从“../../screens/HomeScreen/HomeScreen”导入主屏幕；
常量体=（）=>{
返回(
);
};
导出默认体；

我正在使用React版本：^17.0.2

正文必须是。它不能是任何其他元素的子元素。因此，也许可以改变你处理事情的方式：
const App = () => {
  return (
    <>
      <Navbar />
      <Content />
      <Footer />
    </>
  );
};

const-App=（）=>{
返回(
);
};

以及：
const Content=（）=>{
返回(
);
};
正如错误消息所说，您不能在
标记（或任何其他标记）内使用
。应用程序的主体已经在index.html
文件中定义

您需要启用JavaScript才能运行此应用程序。

您可以将主体组件放置在用作内容主体的
标记中
从“React”导入React；
从“../../screens/HomeScreen/HomeScreen”导入主屏幕；
常量体=（）=>{
返回(
);
};
导出默认体；

或者你可以用碎片
从“React”导入React；
从“../../screens/HomeScreen/HomeScreen”导入主屏幕；
常量体=（）=>{
返回(
);
};
导出默认体；

或者简单地说：
从“React”导入React；
从“../../screens/HomeScreen/HomeScreen”导入主屏幕；
常量体=（）=>{
返回(
);
};
导出默认体；
您应该从body.jsx中删除body标记包装器，它会导致body标记呈现div，这是错误的原因，body标记应始终仅是HTML标记的子项
在App.js文件中添加的所有元素都将在body标记中呈现，除非您在index.js中将元素更改为在index.js中呈现，或者将id根指定给index.html中的任何其他元素
import React from "react";
import HomeScreen from "../../screens/HomeScreen/HomeScreen";

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

export default Body;

从“React”导入React；
从“../../screens/HomeScreen/HomeScreen”导入主屏幕；
常量体=（）=>{
返回(
);
};
导出默认体；
这似乎正是错误消息所说的。不能在
标记内呈现
标记。如何呈现
？这个问题与HTML的工作原理有关，OP需要阅读手册。身体不是随机的标签，在你的应用程序中间像DIV或跨度。