Javascript Girl
  1. Javascript Girl
  3. Erreur de réacteur: le conteneur cible n'est pas un élément DOM
Intereting Posts
Créer un <ul> et le remplir en fonction d'un tableau passé Le script de contenu Chrome ne se charge pas: page vierge 'Range.detach' est maintenant un non-op, selon DOM La connexion WebSocket à l'application OpenShift a échoué Est-ce qu'un appel à Node.js 'async.parallel () synchrone? Comment puis-je détecter la modification d'une classe d'éléments HTML? Chaîne de rupture après un mot spécifique et place des restes sur une nouvelle ligne (Regex) Troisième partie JS in Angular2 dactylographié Parse.com JavaScript SDK inclut, mais ne fonctionne pas Express.js close response Attraper des erreurs dans les promesses JavaScript avec un essai de premier niveau … attraper Remplacer toutes les occurrences d'une chaîne dans un élément Loop in Jade (actuellement connu sous le nom de "Pug") modèle de moteur Créer une balise HTML à partir de l'objet Javascript Google chrome extension: est-il possible d'obtenir la sortie de la console (js errors, console.log ou etc.)

Erreur de réacteur: le conteneur cible n'est pas un élément DOM

Je viens de commencer à utiliser React, donc c'est probablement une erreur très simple, mais nous y allons. Mon code html est très simple: 

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

Notez que j'utilise les fichiers statiques de chargement de django ici. Mon javascript est un peu plus complexe, donc je ne publierai pas tout ici, à moins que quelqu'un ne le demande, mais la ligne avec l'erreur est la suivante: 

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

Après quoi je reçois le «conteneur cible n'est pas une erreur d'élément DOM», il semble que document.getElementById («contenu») est presque certainement un élément DOM.

J'ai regardé ce post de stackoverflow, mais cela ne semblait pas aider dans ma situation.

Quelqu'un a-t-il une idée de pourquoi j'aurais cette erreur?

Je l'ai compris!

Après avoir lu cette publication, j'ai compris que le placement de cette ligne: 

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

Était faux. Cette ligne doit être la dernière ligne dans la section <body> , juste avant la </body> . Déplacer la ligne résout le problème.

Mon explication est que la réaction recherchait l'id entre les balises <head> , au lieu des balises <body> . En raison de cela, il ne pouvait pas trouver l'ID du content , et donc ce n'était pas un véritable élément DOM.

En outre, la meilleure pratique consistant à déplacer votre <script></script> vers le bas du fichier html corrige également cela.