ReactDOM.render(): Ungültiges Komponentenelement. Statt eine Komponentenklasse zugeben, stellen Sie sicher, dass es instanziieren, indem sie es vorbei

dieser Fehler React.createElement zeigt sich, wenn ich laufen testen reactReactDOM.render(): Ungültiges Komponentenelement. Statt eine Komponentenklasse zugeben, stellen Sie sicher, dass es instanziieren, indem sie es vorbei

meine Ordnerstruktur wie folgt einfach:

app folder 
    index.html 
    index.js 
    home.js 
webpack.config.js 
dist folder 
    bundle.js

Index schauen .html ähnliche

<!DOCTYPE html> 
<html> 
<head> 
    <title>hello world app</title> 
    <link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src= "../dist/bundle.js"></script> 
</head> 
<body> 
<div id="app"></div> 
</body> 
</html>

index.js ist wie folgt:

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Home = require('./Home'); 

ReactDOM.render(Home, document.getElementById('app'));

und home.js wie folgt aus:

var React = require('react'); 
var Home = React.createClass({ 
    render: function(){ 
     return(
      <div> hello from home </div> 
     ) 
    } 
}); 
module.exports = Home;

Ich betreibe den Code über diese webpack Konfig:

module.exports = { 
    entry:[ 
    "./app/index.js" 
    ], 
    output: { 
     path: __dirname + '/dist', 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders : [ 
      {test: /\.js$/, exclude : /node_modules/, loader: "babel-loader", 
       query: { 
        presets: ['react'] 
       } 
      } 
     ] 
    } 
}

Nach dem Kompilieren ich die Datei index.html laufen. Und der Fehler ReactDOM.render(): Ungültiges Komponentenelement ... tauchte auf. Was ich falsch gemacht habe?

Quelle

2016-03-29 angry kiwi

ReactDOM.render nimmt eine Instanz einer Reaktion Klasse als erstes Argument. Sie übergeben eine Klasse direkt.

Also statt

ReactDOM.render(Home, document.getElementById('app'))

wie unten Versuchen.

ReactDOM.render(React.createElement(Home), document.getElementById('app'));

oder der JSX Pendant

ReactDOM.render(<Home />, document.getElementById('app'));

Auch wäre es wahrscheinlich eine gute Idee sein, wie weiter unten zu setzen.

<script src= "../dist/bundle.js"></script>

am unteren Rand der Seite, anstatt in der <head>, so dass das Skript <div id="app"></div> finden.

Quelle

2016-03-29 08:05:24 dannyjolie

Sie haben verwenden Funktion machen wie

ReactDOM.render(<Home />, document.getElementById('app'));

Quelle

2016-03-29 07:58:35

ReactDOM.render(): Ungültiges Komponentenelement. Statt eine Komponentenklasse zugeben, stellen Sie sicher, dass es instanziieren, indem sie es vorbei

Antwort

Verwandte Themen