it-swarm.com.ru

Ошибка реагирования: целевой контейнер не является элементом 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.

Я посмотрел на это stackoverflow сообщение, но, похоже, это не помогло в моей ситуации.

У кого-нибудь есть идеи, почему я получаю эту ошибку?

43
lnhubbell

Я понял!

Прочитав это сообщение в блоге я понял, что размещение этой строки:

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

был неправ. Эта строка должна быть последней строкой в ​​разделе <body>, прямо перед тегом </body>. Перемещение линии вниз решает проблему. 

Я объяснил это тем, что реагировал на поиск идентификатора между тегами <head>, а не в тегах <body>. Из-за этого он не смог найти content id, и, таким образом, он не был настоящим элементом DOM.

73
lnhubbell

Кроме того, лучшая практика перемещения вашего <script></script> в конец HTML-файла также исправляет это.

3
daniella

Просто чтобы дать альтернативное решение, потому что оно не упоминается. 

Здесь прекрасно использовать атрибут HTML defer. Таким образом, при загрузке DOM, обычный <script> будет загружаться, когда DOM запускает скрипт. Но если мы используем defer, тогда DOM и скрипт будут загружаться параллельно. Круто то, что скрипт будет оценен в конце - когда DOM загрузится ( source ). 

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

Также убедитесь, что id set в index.html совпадает с тем, на который вы ссылаетесь в index.js

index.html:

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

index.js:

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