Uncaught ReferenceError: mountNode is not defined

匿名 (未验证) 提交于 2019-12-03 03:04:01

问题:

forgive me i've searched everywhere and I'm new in reactjs and trying out examples. I have an error

Uncaught ReferenceError: mountNode is not defined  

I am following the example from here http://facebook.github.io/react/tips/initial-ajax.html

and my code looks like this

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

Thank you in advance!

回答1:

You need to tell React where to mount the <UserGist /> component. You probably want to replace mountNode with document.getElementById('example') to refer to your <div id="example"></div> element:

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


回答2:

Being the accepted answer done, I'd like to add one thing: Don't forget to include references to all necessaries js's libs in your html head section if you are testing this out of "kit examples folder"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> 


标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!