Fehler bei Basic React Beispiel: Uncaught TypeError: undefined ist keine Funktion

Ich versuche, reagieren mit in meine app. Seine eine rails-app mit Schienen-reagieren (obwohl ich nicht glaube, dass das ein Teil des Problems). Ich bin derzeit mit einem sehr einfachen 1-Komponenten-setup:

//react_admin.js.jsx

/** @jsx React.DOM */
var CommentBox = React.createClass({
  render: function() {
    return (
     <div className="commentBox">
       Hello, world! I am a CommentBox.
      </div>
   );
  }
});

React.render(
  <CommentBox />,
  document.getElementById('content')
);

Meine html-Datei enthält:

<body>
  <div id="content"></div>
  <script src="/assets/react.js?body=1"></script>
  <script src="/assets/react_admin.js?body=1"></script>
</body>

Kann ich sehen, dass die Schienen-reagieren ist die Konvertierung meiner react_admin.js.jsx in react_admin.js wie folgt:

/** @jsx React.DOM */

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.DOM.div({className: "commentBox"}, 
        "Hello, world! I am a CommentBox."
      )
    );
  }
});

React.render(
  CommentBox(null),
  document.getElementById('content')
);

Aber chrome ist das auslösen einer "Uncaught TypeError: undefined ist nicht eine Funktion" in den Render.reagieren () - Aufruf, die es zeigt, zwischen "(" und "CommentBox(null)"

Kann mir jemand sagen was ich falsch mache?

InformationsquelleAutor der Frage Laurie Young | 2014-10-29

67

Nachdem 0.14 Reagieren verschoben ReactDOM.render()so dass, wenn Sie aktualisieren Sie Reagieren, Ihr code sollte sein:
```
ReactDOM.render(
  <CommentBox />, document.getElementById('content'));
```
Aber stellen Sie sicher, dass Sie sowohl react.js und react-dom.js im Projekt, da diese nun getrennt.

InformationsquelleAutor der Antwort ivn
15

Sollten Sie ein update auf die neueste Reagieren Bibliothek.

Einige tutorials wurden aktualisiert und verwenden React.render() statt des veralteten React.renderComponent()aber die Autoren sind noch die links zu älteren Versionen bzw. zu Reagieren, die nicht über die neueste render() Methode.

InformationsquelleAutor der Antwort Sebastián Grignoli
4

Ich bin nicht sehr vertraut mit Reagieren, aber es sieht aus wie Sie verwenden sollten React.renderComponent statt React.render

Indem Sie mit dem generierten code durch rails-react lokal in meinem browser und spielen mit den React Objekt, es sieht aus wie die render Methode nicht existiert. Stattdessen React enthält eine renderComponent Methode:

Wenn Sie den code ändern zur Verwendung React.renderComponent statt React.render die Komponente gerendert wird auf der DOM.

Können Sie sehen, es arbeiten hier: http://jsfiddle.net/popksfb0/

InformationsquelleAutor der Antwort jsanchez
2

Nachdem 0.13.x Reagieren bewegt React.renderComponent() zu React.render().

InformationsquelleAutor der Antwort Rajesh Hegde

Aus mir unbekannten Gründen musste ich Wickel mir in {}

So aus:

import React from "react";
import render from "react-dom";
import Router from "./Router";

render(Router, document.getElementById ('app'));

(Arbeiten):

import React from "react";
import {render} from "react-dom";
import Router from "./Router";

render(Router, document.getElementById ('app'));

InformationsquelleAutor der Antwort Jamie Hutber

1

Reagieren.render wurde eingeführt, in der version 0.12 als hier dokumentiert:
https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

Beheben Ihr Problem ein upgrade auf diese version oder höher. Zum Zeitpunkt des Schreibens ist die neueste version 0.13.3.

InformationsquelleAutor der Antwort rjbultitude

Laden Sie die neueste Reagieren Starter-Kit " - > https://facebook.github.io/react/downloads.html
Verwenden react.js und react-dom.js - Dateien auf dem build-Ordner.
Anstelle von "text/jsx" verwenden "text/babel" statt, verweisen auf dieses minified-Bibliothek -> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js

Hier ist das vollständige Skript verweisen auf Ihre ursprüngliche code.

<style>
    .commentBox{
        color:red;
        font-size:16px;
        font-weight:bold
    }
</style>

<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

<script type="text/babel">
    var CommentBox = React.createClass({
        render: function(){
            return (
              React.DOM.div({className: "commentBox"}, 
                "Hello, world! I am a CommentBox."
              )
            );
        }
    });

    ReactDOM.render(
        <CommentBox/>,
        document.getElementById('content')
    );
</script>

InformationsquelleAutor der Antwort Kent Aguilar

0

Für Anfänger, die Fehler (Typ/undefined ist undefined) kann auch zeigen, bis auf die Platzierung Reagieren.render-code-block.

Er sollte sich nach dem erstellen der Komponenten, vorzugsweise an der Unterseite.

InformationsquelleAutor der Antwort Jorge.Methew

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.