Javascript 错误：目标容器不是DOM元素_Javascript_Reactjs

Javascript 错误：目标容器不是DOM元素

javascript reactjs

Javascript 错误：目标容器不是DOM元素,javascript,reactjs,Javascript,Reactjs,我正在学习React，我正在观看YT（）中的一个教程，问题是我只是试图在主文件中打印一个文本，但不起作用（屏幕仍为空白）这是我的包。json（要检查版本，我想React语法更新了吗？）我刚刚删除了“src”文件夹中的所有文件，并创建了这两个（“index.js”和“App.js”） index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App';

我正在学习React，我正在观看YT（）中的一个教程，问题是我只是试图在主文件中打印一个文本，但不起作用（屏幕仍为空白）

这是我的

包。json

（要检查版本，我想React语法更新了吗？）

我刚刚删除了“src”文件夹中的所有文件，并创建了这两个（“index.js”和“App.js”）

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.querySelectorAll('#root'));

import React from 'react';

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

export default App;

我得到这个错误：

（我知道错误给出了它，因为没有创建元素ID“root”，但如果我相信，我的屏幕是空白的，它不会打印文本“App”）

有人能帮我一下吗？非常感谢

干杯

编辑：这是我的

index.html

：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>


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

您已使用

document.querySelectorAll

它将返回元素的集合，而不是元素

您需要使用：

document.getElementById('root')

你用过

document.querySelectorAll

它将返回元素的集合，而不是元素

您需要使用：

document.getElementById('root')

在

公用文件夹中的index.html文件
中，您应该有这样一个
代码，其中根目录
指向您唯一的div
元素


在index.js文件中
不应使用document.querySelectorAll（'#root'）
调用集合，因为即使只有一次出现与选择器匹配，它也会返回集合

改为使用document.querySelector（'#root'）
以找到的第一个选择器为目标
从技术上讲，您可以将index.html文件中的id属性
名称更改为mammy
，就像
中的mammy
一样，它将是文档.querySelector（“#mammy”）
。这只是为了帮助您了解事情的实际工作原理
我希望这有帮助
在公用文件夹中的index.html文件
中，您应该有这样一个
代码，其中根目录
指向您唯一的div
元素

在index.js文件中
不应使用document.querySelectorAll（'#root'）
调用集合，因为即使只有一次出现与选择器匹配，它也会返回集合

改为使用document.querySelector（'#root'）
以找到的第一个选择器为目标
从技术上讲，您可以将index.html文件中的id属性
名称更改为mammy
，就像
中的mammy
一样，它将是文档.querySelector（“#mammy”）
。这只是为了帮助您了解事情的实际工作原理
我希望这会有所帮助
你的index.html有id=root的div吗？请显示你的index.html结构编辑：哦，好的。。。在index.html中，对不起，是的，我更新了我的问题：）好的，您需要，您也可以在控制台中显示消息吗？还可以使用ReactDOM.render（，document.getElementById（'root'）；你的index.html有id=root的div吗？请显示你的index.html结构编辑：哦，好的。。。在index.html中，对不起，是的，我更新了我的问题：）好的，您需要，您也可以在控制台中显示消息吗？还可以使用ReactDOM.render（，document.getElementById（'root'）；伟大而清晰的答案！此外，我认为您可能需要在appcomponent=>return（App）中的return语句中添加parantasis。谢谢！！现在我收到第5:35行：“道具”没有定义没有未定义，但我会调查…伟大而清晰的答案！此外，我认为您可能需要在appcomponent=>return（App）中的return语句中添加parantasis。谢谢！！现在我收到第5:35行：“道具”未定义无未定义，但我会调查…谢谢大家！这是另一个解决方案！：）谢谢你，伙计！这是另一个解决方案！：）