2016-05-16 10 views
0

Ich bin neu zu Reagieren und versuchen, unten React-Komponente zu erstellen, aber es wird nicht gerendert.Kann eine Reaktionskomponente nicht rendern

script.jsx

var Button = React.createClass({ 
     getInitialState:() => { 
     return { 
      counter: 0 
     }; 
     }, 
     handleClick:() => { 
     this.setState({ 
      counter: this.state.counter + 1 
     }); 
     }, 
     render:() => { 
     return (<button onClick={this.handleClick}> this.state.counter </button>); 
     } 
     }); 

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

index.html

<!DOCTYPE html> 
<html> 
    <body> 
    <h1>React App</h1> 
    <div id="root"></div> 

    <script src="libs/react-15.0.2.js"></script> 
    <script src="script.jsx"></script> 
    </body> 
</html> 

kann mir jemand bitte lassen Sie wissen, was hier falsch gehen.

+0

Können Sie das Problem ein bisschen mehr beschreiben.Welchen Fehler haben Sie? –

+0

Soll 'script.js' in'

2

Ich vermute, das Beispiel, das Sie verfolgen, ist ein bisschen veraltet? Es gibt mehrere Probleme im Code. Zunächst einmal sollten Sie jetzt verwenden

import ReactDOM from "react-dom"; 

ReactDOM.render(<Button />, document.getElementById('root')); 

Dann, um JSX Code in Ihrem Browser zu laden, müssen Sie ihn durch Babel laufen. Und selbst wenn Sie das tun, könnte dies nicht funktionieren:

Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.

(von https://facebook.github.io/react/docs/getting-started.html)

So könnten Sie viel besser dran etwas wie webpack oder browserify verwenden.

In Ihrer Funktion machen, sollten Sie den Verweis auf den Zähler in geschweiften Klammern umschließen, weil sie JavaScript ist:

{ this.state.counter } 

Und last not least, wenn Sie anfangen Lernen Reaktion, würde ich vorschlagen, Sie beginnen mit der Verwendung einfacher JavaScript-Klassen, weil dies der richtige Weg für React zu sein scheint:

+0

schätzen Sie Ihre Hinweise. – Dinu