必须返回有效的ReactComponent.您可能已返回undefined,数组或其他一些无效对象

Question

我正在构建一个小的react js应用程序,我收到此错误:

未捕获错误:不变违规:exports.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;

和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;

我认为问题在于我的地图功能,但我真的希望有人告诉我我犯了哪个错误.

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