wake-up-neo.com

Invariante Verletzung: _registerComponent (...): Zielcontainer ist kein DOM-Element

Ich erhalte diese Fehlermeldung nach einer trivialen React-Beispielseite:

Nicht gefundener Fehler: Invariante Verletzung: _registerComponent (...): Zielcontainer ist kein DOM-Element.

Hier ist mein Code:

/** @jsx React.DOM */
'use strict';

var React = require('react');

var App = React.createClass({
  render() {
    return <h1>Yo</h1>;
  }
});

React.renderComponent(<App />, document.body);

HTML:

<html>
<head>
  <script src="/bundle.js"></script>
</head>
<body>
</body>
</html>

Was bedeutet das?

javascriptdomreactjs
342
Dan Abramov

Zum Zeitpunkt der Ausführung des Skripts ist das Element document noch nicht verfügbar, da sich script selbst in head befindet. Während es eine gültige Lösung ist, script in head und Rendern bei DOMContentLoaded -Ereignis zu belassen, ist es noch besser, Setzen Sie Ihr script ganz unten in die body und Render-Root-Komponente in ein div, bevor es so aussieht: 

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

und in der bundle.js, Anruf:

React.render(<App />, document.getElementById('root'));

Sie sollten immer einen verschachtelten div anstelle von body rendern. Andernfalls werden alle Arten von Code von Drittanbietern ( Google Font Loader, Browser-Plugins usw. können den DOM-Knoten body ändern, wenn React) dies nicht erwartet und seltsame Fehler verursacht, die nur schwer zu verfolgen und zu debuggen sind. Lesen Sie mehr zu diesem Thema.

Das Schöne am Setzen von script am Ende ist, dass das Rendern erst dann blockiert wird, wenn das Skript geladen wird, wenn Sie dem Projekt React server rendering) hinzufügen.

Update: (07. Oktober 2015 | v0.14 )

React.render ist veraltet, benutze ReactDOM.render stattdessen.

Beispiel: 

import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));
603
Dan Abramov

/index.html

<!doctype html>
<html>
  <head>
    <title>My Application</title>
    <!-- load application bundle asynchronously -->
    <script async src="/app.js"></script>
    <style type="text/css">
      /* pre-rendered critical path CSS (see isomorphic-style-loader) */
    </style>
  </head>
  <body>
    <div id="app">
      <!-- pre-rendered markup of your JavaScript app (see isomorphic apps) -->
    </div>
  </body>
</html>

/app.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

function run() {
  ReactDOM.render(<App />, document.getElementById('app'));
}

const loadedStates = ['complete', 'loaded', 'interactive'];

if (loadedStates.includes(document.readyState) && document.body) {
  run();
} else {
  window.addEventListener('DOMContentLoaded', run, false);
}

(IE9 +)

Note: Durch die Verwendung von <script async src="..."></script> im Header wird sichergestellt, dass der Browser das JavaScript-Paket vorher HTML-Inhalt lädt.

Quelle: React Starter Kit , Isomorphic-Style-Loader

52
Konstantin Tarkus

die ready-Funktion kann folgendermaßen verwendet werden: 

$(document).ready(function () {
  React.render(<App />, document.body);
});

Wenn Sie jQuery nicht verwenden möchten, können Sie die Funktion onload verwenden:

<body onload="initReact()">...</body>
15
nils petersohn

nur eine wilde Vermutung, wie fügen Sie Folgendes zu index.html hinzu: 

type="javascript"

so was:

<script type="javascript" src="public/bundle.js"> </script>

Bei mir hat es funktioniert! :-)

9
taquiles

Ich bin auf den gleichen Fehler gestoßen. Es stellte sich heraus, dass dies durch einen einfachen Tippfehler verursacht wurde, nachdem mein Code geändert wurde:

document.getElementById('root')

zu

document.querySelector('root')

Beachten Sie das fehlende '#' Es hätte sein sollen 

document.querySelector('#root')

Nur für den Fall, dass es anderen hilft, diesen Fehler zu lösen.

4
mangakid

Ja, Grundsätzlich ist das, was Sie getan haben, richtig, mit der Ausnahme, dass Sie vergessen, dass JavaScript in vielen Fällen synchronisiert wird. Sie müssen also den Code ausführen, bevor IhrDOMgeladen wird.

1) Prüfen Sie, obDOMvollständig geladen ist, und machen Sie dann, was Sie möchten. Sie können beispielsweise DOMContentLoaded anhören:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

2) Eine sehr häufige Methode ist das Hinzufügen des Skript-Tags am Ende Ihrer document (nach dem body-Tag):

<html>
  <head>
  </head>
  <body>
  </body>
  <script src="/bundle.js"></script>
</html>

3) Verwenden von window.onload, der ausgelöst wird, wenn die gesamte Seite geladen wird (img usw.)

window.addEventListener("load", function() {
  console.log("Everything is loaded");
});

4) Verwenden von document.onload, der ausgelöst wird, wennDOMbereit ist:

document.addEventListener("load", function() {
  console.log("DOM is ready");
});

Es gibt noch mehr Optionen, um zu prüfen, obDOMbereit ist, aber die kurze Antwort lautet DO NOT Führen Sie ein Skript aus, bevor Sie sicherstellen, dass Ihr DOM bereit ist in allen Fällen ...

JavaScript arbeitet mitDOMelements zusammen und wenn sie nicht verfügbar sind, wird null zurückgegeben, die gesamte Anwendung kann beschädigt werden. Stellen Sie daher immer sicher, dass Sie vollständig JavaScript ausführen können tun...

3
Alireza

In meinem Fall wurde dieser Fehler durch Hot-Reloading verursacht, während neue Klassen eingeführt wurden. Verwenden Sie in dieser Phase des Projekts normale Beobachter, um Ihren Code zu kompilieren.

1
Micros

Ich bin auf eine ähnliche/gleiche Fehlermeldung gestoßen. In meinem Fall hatte ich nicht den Ziel-DOM-Knoten, der die definierte ReactJS-Komponente darstellen soll. Stellen Sie sicher, dass der HTML-Zielknoten mit den entsprechenden "id" oder "name" zusammen mit anderen HTML-Attributen (für Ihre Designanforderungen geeignet) definiert ist

1
anie codeskol

wenn Sie das Webpack zum Rendern Ihrer Reaktion verwenden und das HtmlWebpackPlugin in Ihrer Reaktion verwenden, erstellt dieses Plugin die leere index.html von selbst und fügt die js-Datei darin ein, sodass sie kein div-Element enthält, da Sie mit HtmlWebpackPlugin-Dokumenten Ihre eigene index.html erstellen können und gib die Adresse für dieses Plugin in meiner webpack.config.js an

 plugins: [

        new HtmlWebpackPlugin({
            title: 'dev',
            template: 'dist/index.html'
        })
    ],

und das ist meine index.html datei

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="">
    <meta name="viewport" content="width=device-width">
    <title>Epos report</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
0
ghazaleh javaheri

es ist einfach, einfache HTML-CSS-Js zu erstellen und das Skript aus Js zu rendern

mport React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

var destination = document.querySelector('#container');

   ReactDOM.render(
<div>
<p> hello world</p>
</div>, destination


        ); 
body{

    text-align: center;
    background-color: aqua;
  padding: 50px;
  border-color: aqua;
  font-family: sans-serif;
}
#container{
  display: flex;
  justify-content: flex;

}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
   
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />   
    <title> app  </title>
  </head>
  <body>
 

    <div id="container">
      
    </div>

  </body>
</html>
0
تقنيتي Taknity

verwenden Sie diese src dom in der Datei index.html und verknüpfen Sie sie anschließend mit der Datei js

0
LOVENEET SINGH

Für diejenigen, die ReactJS.Net verwenden und diesen Fehler nach einer Veröffentlichung erhalten:

Überprüfen Sie die Eigenschaften Ihrer .jsx-Dateien und stellen Sie sicher, dass Build Action auf Content gesetzt ist. Diejenigen, die auf None gesetzt sind, werden nicht veröffentlicht. Ich bin auf diese Lösung von this SO answer gestoßen.

0
Jecoms