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

我剛開始使用React，因此這可能是一個非常簡單的錯誤，但我們現在就去。我的html代碼很簡單：React錯誤：目標容器不是DOM元素

<!-- 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元素。

我看着this stackoverflow後，但它似乎沒有幫助我的情況。

任何人都有任何想法，爲什麼我會得到那個錯誤？

來源

2014-10-17 lnhubbell

我想通了！

閱讀this blog post後，我意識到，這條線的位置：

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

是錯誤的。該行必須是<body>部分中的最後一行，位於</body>標記之前。向下移動線路解決了問題。

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

來源

2014-10-17 01:12:29 lnhubbell

+14

或者（也許是一個好主意），是將'React.render'調用包裝在onload/ready監聽器中。然後，當節點將存在時，放置腳本標記的位置並不重要。 – 2014-10-18 18:22:02

@ PaulO'Shannessy Ahhh有道理！我也會這樣做。 – lnhubbell 2014-10-22 18:35:06

此外，將<script></script>移動到html文件底部的最佳做法也解決了這一問題。

來源

2016-02-05 22:06:46 daniella

是的，使用React 16.2，那是我的問題 – 2018-02-16 14:30:28

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

回答

相關問題