2014-05-12 11 views
14

Verzeihen Sie, ich habe überall gesucht und ich bin neu in reactjs und Beispiele ausprobieren. Ich habe einen FehlerUncaught ReferenceError: MountNode ist nicht definiert

Uncaught ReferenceError: mountNode is not defined 

Ich folge dem Beispiel von hier http://facebook.github.io/react/tips/initial-ajax.html

und mein Code sieht wie folgt aus

<!DOCTYPE html> 
<html> 
    <head> 
    <title><%= title %></title> 
    <link rel='stylesheet' href='/stylesheets/style.css' /> 
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="/javascripts/reactjs/react.js"></script> 
    <script src="/javascripts/reactjs/JSXTransformer.js"></script> 
    </head> 
    <body> 
    <h1><%= title %></h1> 
    <p>Welcome to <%= title %></p> 
    <div id="example"></div> 
    <script src="/javascripts/reactjs/build/helloworld.js"></script> 
    <script type="text/jsx"> 
    /** @jsx React.DOM */ 

    var UserGist = React.createClass({ 
     getInitialState: function() { 
     return { 
      username: '', 
      lastGistUrl: '' 
     }; 
     }, 

     componentDidMount: function() { 
     $.get(this.props.source, function(result) { 
      var lastGist = result[0]; 
      this.setState({ 
      username: lastGist.owner.login, 
      lastGistUrl: lastGist.html_url 
      }); 
     }.bind(this)); 
     }, 

     render: function() { 
     return (
      <div> 
      {this.state.username}last gist is 
      <a href={this.state.lastGistUrl}>here</a>. 
      </div> 
     ); 
     } 
    }); 

    React.renderComponent(<UserGist source="https://api.github.com/users/octocat/gists" />, mountNode); 


    </script> 

    </body> 
</html> 

Vielen Dank im Voraus!

Antwort

26

Sie müssen React mitteilen, wo die Komponente <UserGist /> zu montieren ist. Sie wollen wahrscheinlich mountNode mit document.getElementById('example') ersetzen, um Ihre <div id="example"></div> Element verweisen:

React.render(
    <UserGist source="https://api.github.com/users/octocat/gists" />, 
    document.getElementById('example') 
); 
+0

es hat funktioniert! ich danke dir sehr! Ich bin neu zu reactjs und es sieht interessant aus. – Hokutosei

+0

Wenn ich das versuche, habe ich 'React.renderComponent ist keine Funktion' aber ich fand, dass, wenn ich' React.render' stattdessen tat, ich das Ergebnis hatte, ich hoffte, danke! – ak85

+1

@ ak85 Ja, wir haben die API umbenannt. Bearbeitete meine Antwort. –

0

Als die akzeptierte Antwort getan, würde Ich mag eine Sache hinzufügen: Vergessen Sie nicht Verweise auf alle necessaries js die Libs enthalten in Ihr html Kopfbereich, wenn Sie dies aus "Kit Beispiele Ordner" testen

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://npmcdn.com/[email protected]/dist/react.js"></script> 
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script> 
<script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
Verwandte Themen