web-dev-qa-db-fra.com

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

Je viens juste de commencer à utiliser React, il s’agit donc probablement d’une erreur très simple, mais on y va. 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, je ne vais donc pas tout publier ici à moins que quelqu'un 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 message "le conteneur cible n’est pas une erreur d’élément DOM" et pourtant, il semble que document.getElementById ("contenu") soit presque certainement un élément DOM.

J'ai regardé ceci post stackoverflow, mais cela n'a pas semblé aider dans ma situation.

Quelqu'un a une idée de la raison pour laquelle j'aurais cette erreur?

javascriptdjangodomreactjs
43
lnhubbell

Je l'ai compris!

Après avoir lu cet article de blog je me suis rendu compte que le placement de cette ligne:

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

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

Mon explication à cela est que react recherchait l'ID entre les balises <head>, au lieu de dans les balises <body>. Pour cette raison, l'identificateur content n'a pas été trouvé et il ne s'agissait donc pas d'un véritable élément DOM.

73
lnhubbell

En outre, la meilleure pratique consistant à déplacer votre <script></script> vers le bas du fichier html résout ce problème également.

3
daniella

Juste pour donner une solution alternative, parce que ce n'est pas mentionné. 

C'est très bien d'utiliser l'attribut HTML defer ici. Ainsi, lors du chargement du DOM, un <script> normal sera chargé lorsque le DOM frappe le script. Mais si nous utilisons defer, alors le DOM et le script se chargera en parallèle. La chose intéressante est que le script est évalué à la fin - lorsque le DOM est chargé ( source ). 

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

Assurez-vous également que id set dans index.html est identique à celui auquel vous faites référence dans 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