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

Ich verwende Django und React.Uncaught Invariant Violation: _registerComponent (...): Zielcontainer ist kein DOM-Element

Ich möchte diese HTML-Datei anzuzeigen:

{% load staticfiles %} 

<html> 
    <head> 
    <meta charset="utf-8"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
     crossorigin="anonymous"> 
    </script> 

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
    rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
     crossorigin="anonymous"> 

    <link href="{%static "css/rankingStyle.css"%}" rel="stylesheet" type="text/css"/> 

    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" /> 

    <title>Some title</title> 
    </head> 
    <body> 
    <div id="app" /> 
    <script src="{%static "public/bundle.js"%}" type="text/javascript"></script> 
    </body> 
</html>

Diese Datei verweist auf eine js Datei: <script src="{%static "public/bundle.js"%}" type="text/javascript">.

Die js Datei wird von dieser Reaktion Datei erzielt:

import React from 'react'; 
import {render} from 'react-dom'; 
import Criteria from './Criteria.jsx'; 
import { Button } from 'react-bootstrap'; 

var App = React.createClass({ 


    getInitialState: function() { 
    return {showRest: false}; 
    }, 

    toggleShowRest: function() { 
    this.setState({showRest: !this.state.showRest}); 
    }, 

    render: function() { 
    return (
     <div className="container"> 

      <div className="text-center"> 
      <h1> Title</h1> 

      <button onClick={this.toggleShowRest} type="button" className="btn btn-primary btn-circle btn-xl">Go</button> 
      </div> 

      {this.state.showRest 
      ? 
      <Criteria /> 
      : 
      null} 
     </div> 
    ); 
    } 
}); 


React.render(<App url="/api/comments"/>, document.getElementById('app'));

im Browser bin ich diesen Fehler:

bundle.js:593 Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

Das Gebiet vor der Linie hat 593 diesen Inhalt:

var DOMChildrenOperations = { 

    dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup,

Bisher schaute ich hier: Invariant Violation: _registerComponent(...): Target container is not a DOM element und versuchte alle Antworten .

Sie haben jedoch nicht funktioniert. Ich denke, das Problem wird durch etwas Django-spezifisches verursacht.

Quelle

2016-04-11 octavian

Bitte senden Sie die Zeile mit 'ReactDOM.render()' Methodenaufruf. BTW ein 'div' ist kein selbstschließendes Element, Sie sollten'

'verwenden. Dies kann zu dem Problem beitragen. – pawel

Es gibt keinen 'ReactDOM.render()' Methodenaufruf. Ich benutze 'React.render()'. – octavian

Das ist das gleiche, abhängig von der React-Version. Willst du teilen? Hast du versucht, das div zu schließen? – pawel

-1

Sie bauen js nach der Kuppel Knoten div id importieren sollte, ist App

zB:

enter image description here

Quelle

2016-08-31 02:11:02 yichengjie

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

Antwort

Verwandte Themen