javascript - pagina - reactjs No se pueden leer las ''claves'' de propiedad de undefined
react web app (4)
¡Hoy es mi primer día con React, y enfrenté este problema cuando intenté usar a Babel para trasladar el JSX!
El problema es la versión que está intentando usar, use esta en su lugar:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
No olvide escribir type="text/babel" en la etiqueta <script> que escribirá el JSX para que Babel lo haga por usted, si no lo hace, encontrará este error también!: D) :
Uncaught SyntaxError: Unexpected token <
Estoy aprendiendo reactjs a través de un tutorial y me encontré con este error. Eso dice "No se pueden leer las ''claves'' de propiedad de indefinido" Mi código es muy mínimo, así que asumo que tiene que ver con la estructura del idioma. ¿Alguien sabe el problema y una posible solución?
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<title>ReactJs</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var HelloWorld = ReactDOM.createClass({
render: function() {
return
<div>
<h1>Hello World</h1>
<p>This is some text></p>
</div>
}
});
ReactDOM.render(
<HelloWorld />, document.getElementById(''app''));
</script>
</body>
</html>
Edición: curiosamente, después de nuestros comentarios anteriores, verifiqué si era realmente la versión de babel core, estoy usando esta en mi violín:
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
El segundo que cambio a tu versión anterior me sale esto:
Uncaught TypeError: Cannot read property ''keys'' of undefined
Use React.createClass no ReactDOM.createClass y envuelva varias líneas de html entre paréntesis de esta manera:
Ejemplo de trabajo: https://jsfiddle.net/69z2wepo/38998/
var Hello = React.createClass({
render: function() {
return (
<div>
<h1>Hello World</h1>
<p>This is some text</p>
</div>
)
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById(''container'')
);
No he trabajado con React antes, pero hay algunas cosas que veo que pueden estar causando sus problemas. Primero, React.createClass lugar de ReactDOM.createClass . Segundo, necesitas envolver tu html entre paréntesis:
var HelloWorld = React.createClass({
render: function() {
return (
<div>
<h1>Hello World</h1>
<p>This is some text></p>
</div>
);
}
});
Esto debería hacer que funcione.
Solo para ser claros, ya que las otras respuestas están un poco complicadas. El problema fue usar "babel-core" en lugar de "babel-standalone". Solo busca un cdn para babel-standalone en su lugar.
https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js