Errore con React di base Esempio: Uncaught TypeError: undefined non è una funzione

Sto tentando di ottenere risposta connessa alla mia app. È un'app per rails che utilizza le rails-react (anche se non credo che faccia parte del problema). Attualmente sto usando una semplice messa a punto 1 componente:Errore con React di base Esempio: Uncaught TypeError: undefined non è una funzione

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

Il mio file HTML contiene:

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

posso vedere che Rails-reagire è la conversione mia react_admin.js.jsx in react_admin.js come segue:

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

Tuttavia cromo sta sollevando un '' TypeError Uncaught: non definito non è una funzione '' nella chiamata Render.react(), che mostra tra "(" e "CommentBox (null)"

Qualcuno può dirmi cosa sto facendo male?

fonte

2014-10-29 Laurie Young

assicurarsi hai l'ultima reagire alla versione che dovrebbe essere v0.12.0. Se hai versioni precedenti, dovresti usare il 'React.renderComponent' ora deprezzato come @jsanchez suggerito sotto nelle risposte – trekforever

Io non sono molto familiare con Reagire, ma sembra che si dovrebbe utilizzare React.renderComponent invece di React.render

eseguendo il codice generato da rails-react localmente sul mio browser e giocare con l'oggetto React, sembra il metodo render non esiste. Invece, React contiene un metodo renderComponent:

enter image description here

Se si modifica il codice per utilizzare React.renderComponent invece di React.render, il componente viene reso sul DOM.

Potete vederlo lavorare qui: http://jsfiddle.net/popksfb0/

fonte

2014-10-29 10:47:22 jsanchez

+14

renderComponent è stato appena ammortizzato nell'ultima versione, dovrebbe usare React.render http: //facebook.github .io/react/blog/2014/10/28/react-v0.12.html # deprecations – trekforever

Si dovrebbe aggiornare all'ultima Reagire biblioteca.

Alcuni tutorial sono stati aggiornati per usare React.render() al posto del deprecato React.renderComponent(), ma gli autori sono ancora fornisce link a versioni più vecchie o reagire, che non hanno il nuovo metodo di render().

fonte

2015-06-07 22:10:55

Per i principianti, l'errore (tipo/non definito non definito) può essere visualizzato anche a causa del posizionamento del blocco di codice React.render.

Deve essere posizionato dopo aver creato i componenti, preferibilmente nella parte inferiore.

fonte

2015-07-09 11:08:28

React.render è stata introdotta nella versione 0.12, come documentato qui: https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

per risolvere il problema aggiornamento a quella versione o superiore. Al momento della scrittura, l'ultima versione è 0.13.3.

fonte

2015-07-14 08:32:25 rjbultitude

Dopo 0,13.x React spostato React.renderComponent() in React.render().

fonte

2015-09-28 11:43:59

Dopo 0,14 Reagire si trasferisce a ReactDOM.render(), quindi se si aggiorna reagire, il codice dovrebbe essere:

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

Ma assicuratevi di includere sia react.js e react-dom.js nel progetto in quanto tali sono ora separati.

fonte

2015-11-23 20:49:57 ivn

Questa è la risposta corretta per me. Sto usando v0.15 –

Sto usando in questo modo ma ricevendo errore. potete per favore guarirmi ReactDOM.render (, document.getElementById ('Ishim')); –

@IshimdarAhamad è difficile aiutare in base al tuo commento. Forse non hai importato ReactDOM nel progetto? Non è sufficiente importare React. 'importa ReactDOM da 'react-dom';' – ivn

scaricare l'ultima Reagire Starter Kit ->https://facebook.github.io/react/downloads.html
Usa react.js e reagire-dom.js i file nella cartella di compilazione.
Invece di utilizzare l'uso "text/JSX" "text/babel", invece, fa riferimento a questa libreria minimizzato ->https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js

Ecco lo script completo referenziare la tua codice iniziale.

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

fonte

2015-12-18 18:56:05

Per ragioni sconosciute a me ho dovuto avvolgere miniera in {}

Quindi da:

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

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

Per (lavoro):

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

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

fonte

2016-06-09 21:56:19

Questo perché stai importando solo 'render' da ReactDOM. Se importate ReactDOM da "react-dom"; 'di quello che dovreste usare' ReactDOM.render (Router, document.getElementById ('app')); 'Controllate https://developer.mozilla.org/en- US/docs/Web/JavaScript/Riferimento/Dichiarazioni/importazione per maggiori informazioni. – ivn

Per coloro che sono nuovi a ES6, ricorda di usare esattamente la variabile {render}. Perché si esporta solo l'elemento "render" del modulo completo. Se vuoi usare un nome diverso puoi usare -> 'import {render come customRenderer} da 'react-dom';' –

Errore con React di base Esempio: Uncaught TypeError: undefined non è una funzione

risposta

Problemi correlati