Действительный ReactComponent должен быть возвращен. Возможно, вы вернули undefined, массив или какой-либо другой недопустимый объект

Я создаю небольшое приложение js для реагирования, и я получаю эту ошибку:

Непринятая ошибка: инвариантное нарушение: export.render(): действительный ReactComponent должен быть возвращен. Возможно, вы вернули undefined, массив или какой-либо другой недопустимый объект.

Это мои исходные файлы: 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;

И Чат .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;

Я думаю, проблема в моей функции карты, но я действительно хочу, чтобы кто-то сказал мне, где я сделал ошибку.

Ответ 1

Я загрузил ваш код из GitHub. Проблема заключалась, как я подозревал, в компоновке компонентов в скобках return. Из вашего обновленного кода выше вы не сделали этого в компоненте Chat. Это необходимо, потому что преобразованное значение React.createElement будет находиться на следующей строке после return, никогда не будет работать. Здесь измененная функция:

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

Кроме того, для того, что стоит, ваш компонент App является избыточным. Вы могли бы просто сделать это:

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