时间戳

首页 > 解决方案 > 未捕获的错误：目标容器不是 DOM 元素。VSCode 实时服务器

javascript - 未捕获的错误：目标容器不是 DOM 元素。VSCode 实时服务器

问题描述

我正在为我的项目使用VSCode live server和react & react-dom（均为 17 版）。

我的html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>React Tutorial</title>
    </head>
    <body>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
        <script type="text/babel" src="./index.js"></script>
    </body>
</html>

我的 index.js：https
://codepen.io/gaearon/pen/gWWZgR?editors=0010 我尝试将 < script > 放在 < body >的底部，但它一直抛出此错误：

未捕获的错误：目标容器不是 DOM 元素。

标签： javascriptreactjs

解决方案

您需要root在index.html. 通过查看 index.js 的代码，

ReactDOM.render(<Game />, document.getElementById("root"));

您正在尝试将 react 应用程序安装在 id='root' 的 div 上，这在 index.html 文件中不存在，这就是为什么Uncaught Error: Target container is not a DOM element. VSCode Live Server由于元素不存在而导致错误的原因。

添加 <div id='root'></div>到您的 index.html 正文。

推荐阅读