web-dev-qa-db-de.com

Fehler reagieren: Zielcontainer ist kein DOM-Element

Ich habe gerade erst mit React angefangen, also ist dies wahrscheinlich ein sehr einfacher Fehler, aber jetzt geht es los. Mein HTML-Code ist sehr einfach:

<!-- 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>

Beachten Sie, dass ich hier Djangos statische Ladedateien verwende. Mein Javascript ist etwas komplexer, so dass ich nicht alles hier posten werde, es sei denn, jemand fragt es, aber die Zeile mit dem Fehler lautet:

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

Nach dem ich den 'Zielcontainer ist kein DOM-Elementfehler' bekomme, scheint es jedoch, dass document.getElementById ("content") fast sicher ein DOM-Element ist.

Ich schaute auf this stackoverflow post, aber es schien in meiner Situation nicht zu helfen.

Hat jemand eine Idee, warum ich diesen Fehler bekomme?

43
lnhubbell

Ich habe es herausgefunden!

Nach dem Lesen von diesem Blogpost habe ich festgestellt, dass die Platzierung dieser Zeile:

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

war falsch. Diese Zeile muss die letzte Zeile im Abschnitt <body> sein, direkt vor dem Tag </body>. Das Verschieben der Zeile löst das Problem. 

Meine Erklärung dafür ist, dass es zwischen den <head>-Tags und nicht den <body>-Tags nach der ID gesucht hat. Aus diesem Grund konnte die content-ID nicht gefunden werden und war daher kein echtes DOM-Element.

73
lnhubbell

Die bewährte Methode, Ihren <script></script> an das Ende der HTML-Datei zu verschieben, behebt dies ebenfalls.

3
daniella

Ich hatte den gleichen Fehler mit React Version 16 festgestellt. Dieser Fehler tritt auf, wenn das Javascript, das versucht, die React Komponente zu rendern, vor dem statischen übergeordneten dom-Element enthalten ist Der Fix entspricht der akzeptierten Antwort, dh das JavaScript sollte erst eingebunden werden, nachdem das statische übergeordnete dom-Element im HTML definiert wurde.

1
Binita Bharati

Nur um eine alternative Lösung zu geben, weil sie nicht erwähnt wird. 

Es ist vollkommen in Ordnung, hier das HTML-Attribut defer zu verwenden. Beim Laden des DOMs wird ein regulärer <script> geladen, wenn das DOM das Skript trifft. Wenn wir jedoch defer verwenden, wird das Skript DOM und parallel geladen. Das Tolle ist, dass das Skript am Ende ausgewertet wird - wenn das DOM geladen wurde ( source ). 

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

Stellen Sie außerdem sicher, dass id set in index.html mit dem in index.js übereinstimmt.

index.html:

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

index.js:

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