javascript - props - Error con el ejemplo básico de React: UnEught TypeError: undefined no es una función
react props (8)
Estoy tratando de reaccionar conectado en mi aplicación. Es una aplicación de rieles que usa rails-react (aunque no creo que eso sea parte del problema). Actualmente estoy usando una configuración de 1 componente muy simple:
// 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'')
);
Mi archivo 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>
Puedo ver que Rails-reaccionar está convirtiendo mi react_admin.js.jsx en react_admin.js de la siguiente manera:
/** @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'')
);
Sin embargo, Chrome está generando un '''' TypeError no capturado: undefined no es una función '''' en la llamada Render.react (), que se muestra entre "(" y "CommentBox (null)"
¿Puede alguien decirme qué estoy haciendo mal?
- Descargue el último React Starter Kit -> https://facebook.github.io/react/downloads.html
- Utilice los archivos react.js y react-dom.js en la carpeta de compilación.
- En lugar de utilizar el "texto / jsx", use "text / babel" en su lugar, haciendo referencia a esta biblioteca minimizada -> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js
Aquí está la secuencia de comandos completa que hace referencia a su código inicial.
<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>
Debe actualizar a la última biblioteca de React.
Algunos tutoriales se actualizaron para usar React.render() lugar del obsoleto React.renderComponent() , pero los autores todavía proporcionan enlaces a versiones anteriores o React, que no tienen el método más nuevo de render() .
Después de 0.13.x React movió React.renderComponent() a React.render() .
Después de 0.14 React se movió a ReactDOM.render() , entonces si actualiza React, su código debería ser:
ReactDOM.render(
<CommentBox />, document.getElementById(''content''));
Pero asegúrese de incluir tanto react.js como react-dom.js en su proyecto, ya que ahora están separados.
No estoy muy familiarizado con React, pero parece que deberías estar usando React.renderComponent lugar de React.render
Al ejecutar el código generado por los rails-react localmente en mi navegador y jugamos con el objeto React , parece que el método de render no existe. En cambio, React contiene un método renderComponent :
Si cambia el código para usar React.renderComponent lugar de React.render , el componente se representa en el DOM.
Puedes verlo trabajando aquí: http://jsfiddle.net/popksfb0/
Para los principiantes, el error (tipo / indefinido no está definido) también puede aparecer debido a la ubicación del bloque de código de React.render.
Debe colocarse después de crear los componentes, preferiblemente en la parte inferior.
Por razones que desconocía, tuve que envolver el mío en {}
Entonces desde:
import React from "react";
import render from "react-dom";
import Router from "./Router";
render(Router, document.getElementById (''app''));
Para ( trabajo ):
import React from "react";
import {render} from "react-dom";
import Router from "./Router";
render(Router, document.getElementById (''app''));
React.render se introdujo en la versión 0.12 como se documenta aquí: https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html
Para arreglar la actualización de su problema a esa versión o superior. Al momento de escribir, la última versión es 0.13.3.