javascript - logo - Se debe devolver un ReactComponent válido. Es posible que haya devuelto undefined, una matriz o algún otro objeto no válido.

react js vs angular

Question

Estoy construyendo una pequeña aplicación de reacción js y recibo este error:

Error no detectado: Violación invariante: exports.render (): se debe devolver un ReactComponent válido. Es posible que haya devuelto undefined, una matriz o algún otro objeto no válido.

Estos son mis archivos fuente: App.jsx

var React = require(''react'');
var Chats = require(''./chats'');
var messages = {
chatMessages: [{
name: '' John Doe'',
message: '' Hey Lisa, how are you doing?''
},{
name: ''Lisa Johnson'',
message: ''Pretty good, how are you?''
}]
}
var App = React.createElement(Chats, messages)
React.render(App, document.querySelector(''.container''));

Chats.jsx

var React = require (''react'');
var Chat = require (''./chat'');
var Chats = React.createClass({
render:function(){
var chats = this.props.chatMessages.map(function(chatProps){
return <Chat {...chatProps} />
});
return (
<div>
{chats}
</div>
)
}
});
module.exports = Chats;

Y Chat.jsx

var React = require (''react'');
var Chat = React.createClass ({
render:function (){
return
<div>
<p>{this.props.name}</p>
<span> {this.props.message} </span>
</div>
}
});
module.exports = Chat;

Creo que el problema está en mi función de mapa, pero realmente quiero que alguien me diga dónde cometí el error.

Answer 1

Descargué tu código de GitHub. El problema era, como sospechaba, envolver los componentes entre paréntesis en la return . Desde su código actualizado arriba, no hizo esto en el componente de Chat . Esto es necesario porque el valor transformado de React.createElement residirá en la siguiente línea después de la return , nunca ejecutándose realmente. Aquí está la función alterada:

var Chat = React.createClass({
render: function () {
return (
<div>
<p>{this.props.name}</p>
<span> {this.props.message} </span>
</div>
);
}
});

Además, por lo que vale, su componente de App es redundante. Usted podría hacer esto:

React.render( <Chats {...messages} />, document.querySelector( ''.container'' ) );