ReactJS错误：不变违规

Question

我正在用React JS构建一个应用程序，到目前为止我非常喜欢它。但是，我收到一个错误，我很难确定我做错了什么。这是我的错误：

未捕获错误：不变违例：ImageList.render（）：必须返回有效的ReactComponent。您可能返回了未定义的数组或其他无效对象。

这是我的代码：

// Box for user images 
var ImageBox = React.createClass({ 
    closePopup: function(){ 
     React.unmountComponentAtNode(document.getElementById('imagesPopup')); 
    }, 
    render: function(){ 
     return(
      <div className='imageBox popUp'> 
       ImageBox 
       <div className="popUpClose" onClick={this.closePopup}>X</div> 
       <ImageList /> 
      </div> 
     ); 
    } 
}); 

// User image 
var UserImage = React.createClass({ 
    render: function(){ 
     <img className="thumb" src={this.props.url} /> 
    } 
}); 

// User images list 
var ImageList = React.createClass({ 
    render: function(){ 
     <div className="imageList"> 
      <h1>IMAGES</h1> 
     </div> 
    } 
}); 

Answer 1

你缺少一个return语句。

var UserImage = React.createClass({ 
    render: function(){ 
     <img className="thumb" src={this.props.url} /> 
    } 
}); 

应该

var UserImage = React.createClass({ 
    render: function(){ 
     return <img className="thumb" src={this.props.url} />; 
    } 
}); 

和

var ImageList = React.createClass({ 
    render: function(){ 
     <div className="imageList"> 
      <h1>IMAGES</h1> 
     </div> 
    } 
}); 

应该

var ImageList = React.createClass({ 
    render: function(){ 
     return (
      <div className="imageList"> 
       <h1>IMAGES</h1> 
      </div> 
     ); 
    } 
});