2014-05-12 7 views
14

저는 어디서나 수색했으며 용의자가 새롭고 예제를 사용하고 있습니다. 나는 오류잡히지 않은 ReferenceError : mountNode가 정의되지 않았습니다.

Uncaught ReferenceError: mountNode is not defined 

여기 http://facebook.github.io/react/tips/initial-ajax.html

의 예를 다음 있어요에게이 내 코드는 다음과

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

처럼 보인다 사전에 감사합니다!

답변

26

<UserGist /> 부품을 어디에 장착해야하는지 알려 주셔야합니다. 당신은 아마 당신의 <div id="example"></div> 요소를 참조하는 document.getElementById('example')으로 mountNode를 교체하려면 :

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

그것이 일 "키트의 예는 폴더!" 정말 고맙습니다! 나는 reactjs에 처음이다. 흥미 롭다. – Hokutosei

+0

'React.renderComponent is not a function'을 가지고 있는데,'React.renderComponent is not a function'을 얻었지만,'React.render'를 대신 수행했다면 결과가 좋았다. – ak85

+1

@ ak85 예, API의 이름을 변경했습니다. 내 대답을 편집했습니다. –

0

허용 대답이 이루어지고, 나는 한 가지를 추가하고 싶습니다 : 모든 필수품의 JS의 libs가에 대한 참조를 포함하는 것을 잊지 마세요 당신이 밖으로 테스트하는 경우 HTML 헤드 섹션

<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> 
관련 문제