javascript 错误：目标容器不是React的DOM元素

omtl5h9j 于 2023-05-16 发布在 Java

关注(0)|答案(3)|浏览(120)

我做了这个React应用程序，但我一直得到这个错误：
未捕获错误：createRoot（...）：目标容器不是DOM元素。
有人能帮帮我吗这是我的index.html和index.js。

<!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" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

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

  </body>
</html>

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.createRoot(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

我已经尝试了上传到互联网的所有可能的解决方案，但不幸的是，没有一个还没有工作。

JavaScript

来源：https://stackoverflow.com/questions/71698035/error-target-container-is-not-a-dom-element-with-react

3条答案

按热度按时间

ebdffaop1#

正如文档中所说，签名是：

ReactDOM.createRoot(rootNode).render(<App />);

它取代了：

ReactDOM.render(<App />, rootNode)

所以你需要把你的代码改成

ReactDOM.createRoot(
  document.getElementById("root"),
)
.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

赞(0）回复(0）举报 2023-05-16

6l7fqoea2#

来自react文档，https://17.reactjs.org/docs/concurrent-mode-reference.html#createroot

Replace this line of your code

ReactDOM.createRoot(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

代码行与此代码

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

这应该可以修复错误。

赞(0）回复(0）举报 2023-05-16

62o28rlo3#

我遇到了同样的错误，这个页面帮助我修复了它：https://www.sharooq.com/solved-createroot-target-container-is-not-a-dom-element
很可能在页面完成DOM设置之前就调用了document.getElementById（“root”）。尝试将您的代码移动到：

window.addEventListener("DOMContentLoaded", function (e) {
    ReactDOM.createRoot(...)
});

赞(0）回复(0）举报 2023-05-16

我来回答

javascript 错误：目标容器不是React的DOM元素

3条答案

相关问题

热门标签

最新问答