Reactjs: Komponente nicht rendern

Dies ist peinlich, aber ich verliere Zeit zu versuchen herauszufinden, warum eine reactjs Komponente nicht rendern.Reactjs: Komponente nicht rendern

Hier ist der Code Ich habe zur Zeit:

// index.html 
<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Ulonka Frontend</title> 
    </head> 
    <body> 
    <div id="app"></div> 
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script> 
    </body> 
</html>

In routes.js

import React from 'react' 
import { render } from 'react-dom' 
import { Router, Route, browserHistory, IndexRoute } from 'react-router' 
import App from './App' 

render((
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
    </Route> 
</Router> 
), document.getElementById('app'))

in App.js

import React from 'react' 
export default React.createClass({ 
    render() { 
    return <div> <h1> Hello </h1> </div> 
    } 
})

Checked Quellen in dev-Tools und können die Zeichenfolge 'Hallo' sehen in bundle.js, aber aus irgendeinem Grund wird es nicht im Browser angezeigt.

Kann mir bitte jemand erklären, was mir fehlt? Würde mich sehr über Hilfe freuen. Vielen Dank!

Quelle

2016-06-10 Uzzar

hast du versucht es ohne 'react-route' zu rendern? –

'text/javascript' ist ein falscher MIME-Typ für JS, es ist' application/javascript' entsprechend der Spezifikation. Da kein vernünftiger Browser andere Sprachen als JS unterstützt, behauptet HTML5, dass es sicher ist, '' script src = "..."> 'zu diesem Zweck zu verwenden. –

Warum nicht ''? –

@Ursus, @ polkovnikov.ph, @TheReason!

Vergessen, anzuklagen, dass ich herausgefunden habe, was mein Fehler war.

Mein Fehler war das Setzen der Root-Komponente der App (App.js) auf den Einstiegspunkt der App (index.js). Sobald der Fehler behoben wurde, wurde App.js auf das DOM übertragen.

Danke für alles. sehr geschätzt.

Quelle

2016-06-20 17:03:23 Uzzar

~~Sie verwenden die falsche Syntax in App.js: Die Klasse, die Sie exportieren möchten, hat keinen Namen.~~

So App.js sollte entweder

import React from 'react' const Hello = React.createClass({ render() { return <div> <h1> Hello </h1> </div> } }) export default Hello;

oder ES6 Version sein,

import React from 'react' class Hello extends React.Component({ render() { return <div> <h1> Hello </h1> </div> } }) export default Hello;

~~prüfen, zum Beispiel: https://toddmotto.com/react-create-class-versus-component/~~

Ihre Routen möglicherweise falsch. Ihr Code funktioniert ohne react-router. ~~Nun, nicht ganz: Es funktioniert nach dem Anwenden der richtigen Syntax.~~ Überprüfen Sie the fiddle.

Sind auch routes.js und App.js im selben Verzeichnis?

Quelle

2016-06-10 11:00:52

Ich bemerkte das auch, aber anscheinend können Sie eine "Standard" -Komponente ohne einen Namen haben. Nicht sicher, obwohl; zitieren Sie mich nicht dazu. – Chris

@Chris Interessant. Können Sie das bitte auf dieser [Arbeitsgeige] (https://jsfiddle.net/69z2wepo/45129/) zeigen? –

Nein, aber sieh dir das an [angenommene Antwort] (http://stackoverflow.com/a/34841313/2030321) – Chris

render Methode wurde verschoben, um Paket zu reagieren. Versuchen Sie, diese

Import Reaktion, {} machen aus 'reagieren'

Quelle

2016-06-10 11:00:59 siwymilek

Dies ist nicht notwendig, da Sie das gesamte Paket importieren. – Chris

Reactjs: Komponente nicht rendern

Antwort

Verwandte Themen