主页 / 问题 / 923778
Accepted
MegaRoks
Asked:2020-12-21 19:29:13 +0800 CST2020-12-21 19:29:13 +0800 CST

ReactDOM.render() 出错

  • 772

做一个简单的应用程序时，它在启动时出错Target container is not a DOM element.。我的问题是什么？

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);
serviceWorker.unregister();
reactjs

3 个回答

  1. Best Answer

    到脚本执行时，文档元素还不可用，因为脚本本身显然在标题中。

    该方法通过其标识符 ( ) 或在文档中未找到具有指定document.getElementById标识符的元素时返回对该元素的引用。显然第二个参数进来了。IDnullIDReactDOM.rendernull

    最好将您的脚本放在 HTML 文档正文的最后，并在声明脚本之前渲染根组件，如下所示root：div

    <html>
<head>
</head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

    我还建议你把BrowserRouter它放在你的组件App中——它会更正确，而且看起来更容易：

    ReactDOM.render(<App />, document.getElementById("root"));
    • 3

  2. 我的错误是这个。该文件public/index.html具有以下标记：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... tags above the title stay untouched ... -->
    <title>App</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
  </head>
  <!-- ... body definition stays untouched ... -->
</html>

    添加body并且一切正常：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... tags above the title stay untouched ... -->
    <title>App</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
  </head>
  <!-- ... body definition stays untouched ... -->
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>
    • 0

  3. 最通用的解决方案是使用load 事件。

    这种方法的主要优点是保证在 DOM 完全加载后执行此代码，无论您将 tag 放在哪里<script>。

    还应该记住，在放置<script>在末尾的情况下，<body>行为会略有不同。例如，图片可能未加载或 Web 组件可能未初始化。

    import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

window.addEventListener("load", () => {
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById("root")
    );
    serviceWorker.unregister();
});
    • 0

相关问题