Errore di Reazione: il Container di destinazione non è un elemento DOM

Ho appena iniziato a utilizzare React, quindi questo è probabilmente un errore molto semplice, ma eccoci qui. Il mio codice html è molto semplice:Errore di Reazione: il Container di destinazione non è un elemento 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>

Nota che sto usando file statici di carico di Django qui. La mia javascript è un po 'più complesso, quindi non pubblicherà tutti qui a meno che qualcuno lo richiede, ma la linea con l'errore è questo:

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

Dopo che ho la 'contenitore di destinazione non è un DOM element error 'ancora sembra che document.getElementById ("content") sia quasi certamente un elemento DOM.

Ho guardato al post stackoverflow this, ma non sembra essere d'aiuto nella mia situazione.

Qualcuno ha idea del motivo per cui riceverei quell'errore?

fonte

2014-10-17 lnhubbell

L'ho capito!

Dopo aver letto this blog post mi sono reso conto che la collocazione di questa linea:

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

era sbagliato. Questa riga deve essere l'ultima riga nella sezione <body>, subito prima del tag </body>. Lo spostamento della linea verso il basso risolve il problema.

La mia spiegazione di questo è che era alla ricerca di reagire l'id tra i <head> tag, anziché nelle <body> tag. Per questo motivo non è stato possibile trovare l'id content e quindi non era un vero elemento DOM.

fonte

2014-10-17 01:12:29 lnhubbell

+14

In alternativa (e probabilmente una buona idea), è necessario racchiudere la chiamata 'React.render' in un listener onload/ready. Quindi non importa dove si inserisce il tag dello script poiché il nodo esisterà. –

@ PaulO'Shannessy Ahhh questo ha un senso! Lo farò anche io. – lnhubbell

Inoltre, la migliore pratica di spostare il tuo <script></script> nella parte inferiore del file html corregge anche questo.

fonte

2016-02-05 22:06:46 daniella

sì, usando React 16.2 e quello era il mio problema –

Errore di Reazione: il Container di destinazione non è un elemento DOM

risposta

Problemi correlati