web-dev-qa-db-ja.com

React Error：ターゲットコンテナはDOM要素ではありません

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要素であるようです。

this stackoverflow postを見ましたが、私の状況では役に立たなかったようです。

なぜそのエラーが発生するのか誰にも分かりますか？

javascriptdjangodomreactjs
47
lnhubbell

私はそれを考え出した！

このブログ投稿 を読んだ後、この行の配置が次のようになっていることに気付きました。

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

間違っていました。その行は、<body>タグの直前の</body>セクションの最後の行である必要があります。行を下に移動すると、問題が解決します。

これに対する私の説明は、reactは<head>タグではなく、<body>タグの間にあるIDを探していたということです。このため、content idが見つからなかったため、実際のDOM要素ではありませんでした。

76
lnhubbell

また、index.htmlでidが設定されていることを確認してくださいindex.js

index.html：

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

index.js：

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

また、<script></script> htmlファイルの下部にこれを修正します。

3
daniella

言及されていないため、代替ソリューションを提供するだけです。

ここでHTML属性deferを使用しても問題ありません。したがって、DOMをロードするとき、通常の<script>は、DOMがスクリプトにヒットするとロードされます。ただし、deferを使用すると、DOMandスクリプトが並行してロードされます。クールなのは、スクリプトが最後に評価されることです-DOMが読み込まれたとき（ source ）。

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

Reactバージョン16で同じエラーが発生しました。このエラーは、ReactコンポーネントをレンダリングしようとするJavascriptが静的親dom要素の前に含まれている場合に発生します修正は受け入れられた答えと同じです、つまり、JavaScriptは静的な親dom要素がhtmlで定義された後にのみ含まれるべきです。

1
Binita Bharati