Question

我正在构建一个小型的反应js应用程序，我收到了这个错误：

未捕获错误：不变违规：exports.render（）：有效必须返回ReactComponent。你可能已经返回undefined，a 数组或其他一些无效对象。

这些是我的源文件： 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之后的 next 行，从未实际运行。这里改变了功能：

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

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

1 个答案: