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