web-dev-qa-db-de.com

Nicht gefundener ReferenceError: mountNode ist nicht definiert

verzeihen Sie, dass ich überall gesucht habe und ich bin neu in reacts und probiere Beispiele aus. Ich habe einen Fehler

Uncaught ReferenceError: mountNode is not defined 

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

und mein Code sieht so 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>

Danke im Voraus!

19
Hokutosei

Sie müssen React mitteilen, wo die <UserGist />-Komponente gemountet werden soll. Sie möchten wahrscheinlich mountNode durch document.getElementById('example') ersetzen, um auf Ihr <div id="example"></div>-Element zu verweisen:

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

Als akzeptierte Antwort möchte ich noch eines hinzufügen: Vergessen Sie nicht, Verweise auf alle notwendigen Bibliotheken von Js in Ihren HTML-Kopfbereich aufzunehmen, wenn Sie dies aus dem "Kit-Beispiel-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>
0
Val Martinez