web-dev-qa-db-fra.com

React TypeError: React.renderComponent n'est pas une fonction

J'ai reçu ce message étrange après avoir suivi un didacticiel de React pour créer une application simple . http://blog.revathskumar.com/2014/05/getting-started-with-react.html }

J'ai utilisé Bower pour installer réagi et inclus les scripts comme suit:

<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>

comme dans le tutoriel ... Au début, je pensais que les scripts n'étaient pas chargés, mais ce n'est évidemment pas le cas ... C'est quoi le problème?

reactjsrender
17
Webconstructor

Ces jours c'est

ReactDOM.render(

et incluez le fichier source:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>

Voici l'avertissement de React:

Warning: React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead.
23
Connor Leech

bower installe la dernière version dans ce cas la version 0.12.0.

il y a un changement dans la convention de la fonction de rendu.

https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

Le composant a été supprimé de toutes nos méthodes React.render *.

alors utilisez

    React.render(

au lieu de

   React.renderComponent(
17
Webconstructor

Dernièrement, 'React.render ()' est amorti. Utilisez donc 'ReactDom.render ()'

import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App.jsx';
require('./main.scss');

ReactDOM.render(<App />, document.getElementById('container'));
7
Ignatius Andrew

J'ai eu le même problème; J'ai suivi le tutoriel avec précision et j'ai eu la même erreur que vous.

Ce sont les changements que je devais faire pour que cela fonctionne ...

npm install --save react-dom

modifié index.jsx contenu:

/** @jsx React.DOM */
'use strict'
var ReactDOM = require('react-dom')
var Hello = require('./Hello')
ReactDOM.render(<Hello />, document.getElementById('content'))

Et ça l'a eu

Je suis très nouveau pour réagir, alors ce n'est peut-être pas la meilleure solution, mais c'est la mienne pour le moment.

edit: Depuis, j'ai trouvé une autre procédure plus récente (qui fonctionne) https://www.twilio.com/blog/2015/08/setting-up-react-for-es6 -with-webpack-and-babel-2.html

3
FraggaMuffin
  1. Téléchargez le dernier kit de démarrage React -> https://facebook.github.io/react/downloads.html
  2. Utilisez les fichiers react.js et react-dom.js dans le dossier de construction.
  3. Au lieu d'utiliser "text/jsx", utilisez "text/babel" pour référencer cette bibliothèque réduite -> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min .js

Voici le script complet pour votre référence

<div id="target-container"></div>

<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
    var MyComponent = React.createClass({
        render: function(){
            return(
                <h1>Sample text</h1>
            );
        }
    });

    ReactDOM.render(
        <MyComponent/>,
        document.getElementById('target-container')
    );
</script>
1
Kent Aguilar

vous devriez écrire ReactDOM.render au lieu de React.render.

https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js

Ces trois javascript est requis

0
Quera