堆棧內存溢出
  簡體   English   中英

反應錯誤：目標容器不是 DOM 元素

[英]React Error: Target Container is not a DOM Element

 原文  2014-10-17 01:03:11  1   10    javascript/ django/ dom/ reactjs

問題描述

我剛開始使用 React，所以這可能是一個非常簡單的錯誤，但我們開始吧。 我的 html 代碼非常簡單：

<!-- base.html -->
<html>
  <head>
    <title>Note Cards</title>
    <script src="http://fb.me/react-0.11.2.js"></script>
<!--     <script src="http://fb.me/JSXTransformer-0.11.2.js"></script> -->
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
    <script src="{% static "build/react.js" %}"></script>
  </head>
  <body>
    <h1 id="content">Note Cards</h1>
    <div class="gotcha"></div>
  </body>
</html>

請注意，我在這里使用 django 的加載靜態文件。 我的 javascript 有點復雜，所以除非有人要求，否則我不會在這里發布所有內容，但錯誤行是這樣的：

React.renderComponent(
  CardBox({url: "/cards/?format=json", pollInterval: 2000}),
  document.getElementById("content")
);

之后我得到“目標容器不是 DOM 元素錯誤”但似乎 document.getElementById("content") 幾乎可以肯定是一個 DOM 元素。

我查看了這個stackoverflow 帖子，但它似乎對我的情況沒有幫助。

任何人都知道為什么我會收到那個錯誤？

10 個解決方案

解決方案1
 100 已采納  2014-10-17 01:12:29

我想到了！

閱讀這篇博文后，我意識到這一行的位置：

<script src="{% static "build/react.js" %}"></script>

錯了。 該行必須是<body>部分中的最后一行，就在</body>標記之前。 將線向下移動可以解決問題。

我對此的解釋是，react 正在尋找<head>標簽之間的 id，而不是<body>標簽。 因此它找不到content ID，因此它不是真正的 DOM 元素。

解決方案2
 38  2018-12-07 07:44:02

還要確保在index.html 中設置的id與您在index.js 中引用的相同

索引.html：

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

索引.js：

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

解決方案3
 11  2019-01-23 09:10:32

只是提供一個替代解決方案，因為它沒有被提及。

在這里使用 HTML 屬性defer問題。 因此，在加載 DOM 時，當 DOM 命中腳本時，將加載常規<script> 。 但是如果我們使用defer ，那么 DOM和腳本將並行加載。 很酷的事情是腳本最終會被評估 - 當 DOM 加載時（ 源）。

<script src="{% static "build/react.js" %}" defer></script>

解決方案4
 9  2020-08-02 13:50:14

網絡包解決方案

如果您在 React 中使用 webpack 和 HMR 時遇到此錯誤。

您需要創建模板index.html並將其保存在src文件夾中：

<html>
    <body>
       <div id="root"></root>
    </body>
</html>

現在，當我們有id="root"模板時，我們需要告訴 webpack 生成 index.html，它將反映我們的index.html文件。

要做到這一點：

plugins: [
    new HtmlWebpackPlugin({
        title: "Application name",
        template: './src/index.html'
    })
],

template屬性會告訴 webpack 如何構建index.html文件。

解決方案5
 7  2016-02-05 22:06:46

此外，將<script></script>到 html 文件底部的最佳實踐也解決了這個問題。

解決方案6
 7  2019-04-09 10:52:25

我在 React 版本 16 中遇到了同樣的錯誤。當嘗試呈現 React 組件的 Javascript 包含在 html 中的靜態父 dom 元素之前時，就會出現此錯誤。 修復與接受的答案相同，即只有在 html 中定義了靜態父 dom 元素后，才應包含 JavaScript。

解決方案7
 2  2020-05-12 03:51:25

你也可以做這樣的事情：

document.addEventListener("DOMContentLoaded", function(event) {
  React.renderComponent(
    CardBox({url: "/cards/?format=json", pollInterval: 2000}),
    document.getElementById("content")
  );
})

DOMContentLoaded事件在初始 HTML 文檔完全加載和解析后觸發，無需等待樣式表、圖像和子框架完成加載。

解決方案8
 2  2020-08-02 06:37:02

我遇到了同樣的錯誤，我用 create-react-app 創建了應用程序，但在 /public/index.html 中還添加了 matialize 腳本，但與“root”有連接，所以我添加了

<div id="root"></div>

就在之前

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/ materialize.min.js"></script>

它對我有用。

解決方案9
 1  2021-01-29 01:58:27

對於那些在網站的某些部分實現了 react js 並遇到此問題的人。 在渲染反應組件之前，只需添加一個條件來檢查該元素是否存在於該頁面上。

<div id="element"></div>

...

const someElement = document.getElementById("element")
    
if(someElement) {
  ReactDOM.render(<Yourcomponent />, someElement)
}

解決方案10
 0  2021-06-28 14:14:21

我在一個簡單的項目中遇到相同錯誤的情況之一。 我希望該解決方案可以幫助某人。

下面的代碼片段足以理解解決方案：

索引.html

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

someFile.js ：注意行const portalElement = document.getElementById("overlays"); 以下 ：

const portalElement = document.getElementById("overlays");

const Modal = (props) => {
  return (
    <Fragment>
            {ReactDOM.createPortal(<Backdrop />, portalElement)}
            
      {ReactDOM.createPortal(
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalElement
      )}
          
    </Fragment>
  );
};

我的 index.html 文件中沒有 id = "overlays" 的任何元素，因此上面突出顯示的行輸出 null，因此 React 無法在哪個元素中找到它應該創建門戶的元素，即{ReactDOM.createPortal(<Backdrop />, portalElement) } 所以我得到以下錯誤

在此處輸入圖片說明

我在 index.html 文件中添加了 div 並且錯誤消失了。

 <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="overlays"></div>
    <div id="root"></div>
  </body>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 React - 未捕獲的錯誤：目標容器不是 DOM 元素 React - 錯誤：目標容器不是 DOM 元素 react中的目標容器不是DOM元素 錯誤：目標容器不是 DOM 元素 react /react-redux 反應並使用 ReactDOM.createPortal() - 目標容器不是 DOM 元素錯誤 react-pdf - 錯誤：目標容器不是 DOM 元素 導入React組件時發生錯誤“目標容器不是DOM元素” React.js未捕獲的錯誤：_registerComponent（…）：目標容器不是DOM元素 反應測試錯誤。 目標容器不是DOM元素 Meteor-React 錯誤：修復后目標容器不是 DOM 元素
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM