javascript 未捕获的 ReferenceError: mountNode 未定义

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23600443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 01:12:10  来源:igfitidea点击:

Uncaught ReferenceError: mountNode is not defined

javascriptjqueryreactjs

提问by Hokutosei

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

原谅我到处搜索,我是 reactjs 的新手并尝试示例。我有一个错误

Uncaught ReferenceError: mountNode is not defined 

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

我正在遵循这里的示例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!

先感谢您!

回答by Sophie Alpert

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

你需要告诉 React 在哪里挂载<UserGist />组件。你可能要替换mountNodedocument.getElementById('example')参考你的<div id="example"></div>元素:

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

回答by Val Martinez

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"

完成接受的答案后,我想添加一件事:如果您要从“套件示例文件夹”中进行测试,请不要忘记在 html 标题部分中包含对所有必需 js 库的引用

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