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