javascript - 必须返回一个有效的 ReactComponent。您可能返回了未定义的数组或其他无效对象

Question

我正在构建一个小型 React js 应用程序，但收到此错误:

Uncaught Error: Invariant Violation: exports.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

这些是我的源文件: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;

我认为问题出在我的 map 功能中，但我真的希望有人告诉我我在哪里犯了错误。

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

此外，就其值(value)而言，您的 App 组件是多余的。你可以这样做:

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