web-dev-qa-db-fra.com

Erreur avec basic React Exemple: Uncaught TypeError: undefined n'est pas une fonction

J'essaie de me connecter à mon application. C'est une Rails utilisant Rails-react (bien que je ne pense pas que cela fasse partie du problème). J'utilise actuellement une configuration très simple à 1 composant:

// 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')
);

Mon fichier html contient:

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

Je peux voir que Rails-react convertit mon react_admin.js.jsx en react_admin.js comme suit:

/** @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')
);

Cependant chrome déclenche une '' TypeError Uncaught: undefined n'est pas une fonction '' dans l'appel Render.react (), qu'il affiche entre "(" et "CommentBox (null)"

Quelqu'un peut-il me dire ce que je fais mal?

javascriptreactjsreact-jsxreact-rails
32
Laurie Young

Après 0.14 React déplacé vers ReactDOM.render(), donc si vous mettez à jour React, votre code devrait être:

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

Mais assurez-vous d'inclure les deux react.js et react-dom.js dans votre projet car ceux-ci sont désormais séparés.

67
ivn

Vous devez mettre à jour la dernière bibliothèque React.

Certains didacticiels ont été mis à jour pour utiliser React.render() au lieu de la fonction obsolète React.renderComponent(), mais les auteurs fournissent toujours des liens vers des versions plus anciennes ou React, qui n'ont pas la plus récente render() méthode.

15
Sebastián Grignoli

Je ne connais pas très bien React, mais il semble que vous devriez utiliser React.renderComponent au lieu de React.render

En exécutant votre code généré par Rails-react localement sur mon navigateur et en jouant avec l'objet React, il semble que la méthode render n'existe pas. Au lieu de cela, React contient une méthode renderComponent:

enter image description here

Si vous modifiez le code pour utiliser React.renderComponent au lieu de React.render, le composant est rendu sur le DOM.

Vous pouvez le voir fonctionner ici: http://jsfiddle.net/popksfb0/

4
jsanchez

Pour des raisons que je ne connaissais pas, j'ai dû envelopper le mien dans {}

Donc à partir de:

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

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

Pour (travail):

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

render(Router, document.getElementById ('app'));
2
Jamie Hutber

Après 0.13.x React a déplacé React.renderComponent() vers React.render().

2
Rajesh Hegde
  1. Téléchargez la dernière React Starter Kit -> https://facebook.github.io/react/downloads.html
  2. Utilisez les fichiers react.js et react-dom.js sur la version dossier.
  3. Au lieu d'utiliser "text/jsx", utilisez plutôt "text/babel", en référençant cette bibliothèque minifiée -> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser .min.js

Voici le script complet référençant votre code initial.

<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>
1
Kent Aguilar

React.render a été introduit dans la version 0.12 comme indiqué ici: https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

Pour résoudre votre problème, mettez à niveau vers cette version ou une version ultérieure. Au moment de la rédaction, la dernière version est la 0.13.3.

1
rjbultitude

Pour les débutants, l'erreur (type/undefined n'est pas défini) peut également apparaître en raison du placement du bloc de code React.render.

Il doit être placé après la création des composants, de préférence en bas.

0
Jorge.Methew