BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] React Error: 対象コンテナは DOM 要素ではありません。

2022-02-01 02:35:05

質問

Reactを使い始めたばかりなので、非常に単純なミスかもしれませんが、どうぞ。私のhtmlコードは非常にシンプルです。 

<!-- base.html -->
<html>
  <head>
    <title>Note Cards</title>
    <script src="http://<url>/react-0.11.2.js"></script>
<!--     <script src="http://<url>/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 の load static files を使っていることに注意してください。(私の JavaScript はもう少し複雑なので、誰かがリクエストしない限り、ここに全ては掲載しません)。これはエラーのある行です。 

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

その後、「target container is not a DOM element error」が表示されましたが、document.getElementById("content")はほぼ確実にDOM要素であると思われます。

を見てみると これ stackoverflowの投稿ですが、私の状況には役に立たなかったようです。

なぜこのようなエラーが発生するのか、どなたか心当たりはありませんか？

解決方法は？

わかったぞ！

読了後 このブログの記事 この行の配置に気がついたのです。 

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

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

私の説明では、reactはidを <head> タグではなく <body> タグを使用します。このため content という id があり、これは本当の DOM 要素ではありませんでした。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します