2014-05-12 23 views
14

perdonami ho cercato ovunque e sono nuovo in reactjs e provare esempi. Ho un erroreUncaught ReferenceError: mountNode non è definito

Uncaught ReferenceError: mountNode is not defined 

Seguo l'esempio da qui http://facebook.github.io/react/tips/initial-ajax.html

e il mio codice è simile

<!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> 

Grazie in anticipo!

risposta

26

È necessario comunicare a React dove montare il componente <UserGist />. Probabilmente si desidera sostituire mountNode con document.getElementById('example') per riferirsi alla <div id="example"></div> elemento:

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

ha funzionato! grazie mille! Sono nuovo di reactjs e sembra interessante .. – Hokutosei

+0

Quando provo questo ho ottenuto che "React.renderComponent non è una funzione", ma ho scoperto che se ho fatto "React.render" invece ho ottenuto il risultato che speravo in ringraziamenti! – ak85

+1

@ ak85 Sì, abbiamo rinominato l'API. Modificato la mia risposta. –

0

Essendo la risposta accettata fatto, vorrei aggiungere una cosa: non dimenticate di includere i riferimenti a librerie tutti i necessaries di JS in la tua sezione head html se stai provando questo fuori da "cartella degli esempi di kit"

<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> 
Problemi correlati