Błąd Reakcji: Kontener docelowy nie jest elementem DOM

Właśnie zacząłem używać React, więc jest to prawdopodobnie bardzo prosty błąd, ale zaczynamy. Mój kod HTML jest bardzo prosty:Błąd Reakcji: Kontener docelowy nie jest elementem 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>

Proszę zauważyć, że tutaj używam plików statycznych obciążenia django. Moje javascript jest nieco bardziej skomplikowane, więc nie będę pisać to wszystko tutaj, chyba że ktoś zażąda, ale linia z błędem jest to:

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

Po czym pojawia się „kontener docelowy nie jest DOM błąd elementu "wydaje się, że document.getElementById (" content ") jest prawie na pewno elementem DOM.

Spojrzałem na this stackoverflow post, ale wydawało się to nie pomagać w mojej sytuacji.

Ktoś ma pojęcie, dlaczego dostaję ten błąd?

Źródło

2014-10-17 lnhubbell

Wymyśliłem!

Po przeczytaniu this blog post zdałem sobie sprawę, że umieszczenie tej linii:

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

myliłem. Ta linia musi być ostatnią linią w sekcji <body>, tuż przed znacznikiem </body>. Przesunięcie linii rozwiązuje problem.

Moje wyjaśnienie tego jest takie, że respondent szukał identyfikatora pomiędzy tagami <head> zamiast tagów <body>. Z tego powodu nie mógł znaleźć identyfikatora content, a zatem nie był prawdziwym elementem DOM.

Źródło

2014-10-17 01:12:29 lnhubbell

+14

Alternatywnie (i prawdopodobnie dobry pomysł), należy opakować wywołanie 'React.render' w odbiorniku onload/ready. Wtedy nie ma znaczenia, gdzie umieścisz znacznik skryptu, ponieważ węzeł będzie istnieć. –

@ PaulO'Shannessy Ahhh ma to sens! Zrobię to również. – lnhubbell

Również najlepsza praktyka przenoszenia <script></script> na dół pliku html również to naprawia.

Źródło

2016-02-05 22:06:46 daniella

Tak, używając React 16.2 i to był mój problem –

Błąd Reakcji: Kontener docelowy nie jest elementem DOM

Odpowiedz

Powiązane problemy