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

Tev*_*evz 13 javascript reactjs

我已经制作了这个 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>
Run Code Online (Sandbox Code Playgroud)
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();
Run Code Online (Sandbox Code Playgroud)

我已经尝试了上传到互联网的所有可能的解决方案,但不幸的是它们都还没有起作用。

Cer*_*nce 20

正如文档所说,签名是:

ReactDOM.createRoot(rootNode).render(<App />);
Run Code Online (Sandbox Code Playgroud)

它取代了:

ReactDOM.render(<App />, rootNode)
Run Code Online (Sandbox Code Playgroud)

所以你需要将代码更改为

ReactDOM.createRoot(
  document.getElementById("root"),
)
.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);
Run Code Online (Sandbox Code Playgroud)

  • 我仍然收到此错误。 (2认同)