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

Question

Ich bekomme diesen Fehler nach Erstellung einer trivialen React-Beispiel-Seite:

Nicht eingefangener Fehler: Invariante Verletzung: _registerComponent(...): Ziel-Container ist kein DOM-Element.

Hier ist mein Code:

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

var React = require('react');

var App = React.createClass({
  render() {
    return Yo;
  }
});

React.renderComponent(, document.body);

HTML:

Was bedeutet das?

Answer 1

Wenn das Skript ausgeführt wird, ist das document-Element noch nicht verfügbar, da das script selbst im head steht. Während es eine gültige Lösung ist, das script im head zu belassen und es auf das Ereignis DOMContentLoaded zu rendern, ist es sogar besser, Ihr script ganz unten im body zu platzieren und das Wurzelkomponente in ein div vorher zu rendern, so wie hier:

und im bundle.js folgendes aufrufen:

React.render(, document.getElementById('root'));

Sie sollten immer in ein verschachteltes div rendern, anstatt in den body. Ansonsten können allerlei Drittanbietercode (Google Font Loader, Browser-Plugins, was auch immer) den body-DOM-Knoten ändern, wenn React es nicht erwartet, und seltsame Fehler verursachen, die sehr schwer zu verfolgen und zu debuggen sind. Lesen Sie mehr über dieses Problem.

Das Gute daran, das script unten zu platzieren, ist, dass es das Rendern nicht blockiert, bis das Skript geladen ist, falls Sie das React-Server-Rendering zu Ihrem Projekt hinzufügen.

---

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

React.render ist veraltet, verwenden Sie ReactDOM.render stattdessen.

Beispiel:

import ReactDOM from 'react-dom';

ReactDOM.render(, document.getElementById('root'));

Answer 2

/index.html

    Meine Anwendung

      /* Vorgerenderter kritischer Pfad CSS (siehe isomorphic-style-loader) */

/app.js

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

function run() {
  ReactDOM.render(, document.getElementById('app'));
}

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

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

(IE9+)

Hinweis: Mit im Header wird sichergestellt, dass der Browser mit dem Herunterladen des JavaScript-Bündels beginnt bevor der HTML-Inhalt geladen wird.

Quelle: React Starter Kit, isomorphic-style-loader

Answer 3

Die fertige Funktion kann wie folgt verwendet werden:

$(document).ready(function () {
  React.render(, document.body);
});

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

...

Answer 4

Nur eine wilde Vermutung, wie wäre es, dies zu index.html hinzuzufügen:

type="javascript"

so:

Bei mir hat es funktioniert! :-)

Answer 5

Ich bin auf denselben Fehler gestoßen. Es stellte sich heraus, dass er durch einen einfachen Tippfehler verursacht wurde, nachdem ich meinen Code geändert hatte von:

document.getElementById('root')

zu

document.querySelector('root')

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

document.querySelector('#root')

Nur zur Information, falls es jemand anderem hilft, diesen Fehler zu beheben.