有効なreactjsコンポーネントは、ネスト時にレンダリングされません。

Question

コンポーネントの構成をレンダリングする際にこのエラーが発生します。私はエラーがどこにあるか見つけることができません。私は間違って何をしていますか、コンソールから読むことでエラーの正確な場所を読み取る方法は？

var Hamburger = React.createClass({ 
    render: function(){ 
     return(
      <img id="hamburger" src="hamburger.png"/> 
     ) 
    } 
}); 

var Search = React.createClass({ 
    render: function(){ 
     return(
      <div> 
       <input id ="search-input" type="text" placeholder = "Search your favorites"/> 
       <img id="search-img" src = "search.png"/> 
      </div> 
     ) 
    } 
}); 

var Cart = React.createClass({ 
    render: function(){ 
     return(
      <img id ="cart" src = "cart.png"/> 
     ) 
    } 
}); 

var Header = React.createClass({ 
    render: function(){ 
     return(
      <div id="header"> 
       <Hamburger/> 
       <Search/> 
       <Cart/> 
      </div> 
     ) 
    } 
}); 

// Scroll bar for categories 

var Tab = React.createClass({ 
    render: function(){ 
     return(
      <p>{this.props.name}</p> 
     ) 
    } 
}) 

var tabNames = ["VEG PIZZA","NON-EG PIZZA","PIZZA MANIA","BURGER PIZZA","SIDES AND BEVERAGES"]; 
var ScrollBar = React.createClass({ 
    render: function(){ 
     var tabs = []; 
     for (var i = 0; i < tabNames.length; i++) { 
      tabs.push(
       <Tab name = {tabNames[i]} key={i}/> 
      ) 
     } 
     return(
      <div id = "scrollbar">{tabs}</div> 
     ) 
    } 
}); 


var Quickadd = React.createClass({ 
    render: function(){ 
     return(
      <input className = "action-btn" type="button" value="Quick Add"/> 
     ) 
    } 
}); 


var Item = React.createClass({ 
    render: function(){ 
     return(
      <div className= "item-tab"> 
       <img className="pizza-img" src={this.props.source}/> 
       <div className="item-title">{this.props.title}</div> 
       <div className="item-desc">{this.props.desc}</div> 
       <div className="item-price">{this.props.price}</div> 
       <div className="size-btns"> 
        <input className="size-btn" type="button" value="Regular"/> 
        <input className="size-btn" type="button" value="Medium"/> 
        <input className="size-btn" type="button" value="Large"/> 
       </div> 
       <div className = "action-btns"> 
        <input className = "action-btn" type="button" value="Quick Add"/> 
        <Quickadd/> 
       </div> 
      </div> 
     ) 
    } 
}); 


var Pizzas = [ 
    { 
     title: "Pizza1", 
     description: "Lorem ipsum dolor sit amet, insolens expetenda euripidis sit ne, nec et option aperiri, id vel verear verterem imperdiet.", 
     price: "₹910", 
     image: "images/pizza.jpg" 
    }, 
    { 
     title: "Pizza2", 
     description: "Lorem ipsum dolor sit amet, insolens expetenda euripidis sit ne, nec et option aperiri, id vel verear verterem imperdiet.", 
     price: "₹545", 
     image: "images/pizza.jpg" 
    }, 
    { 
     title: "Pizza3", 
     description: "Lorem ipsum dolor sit amet, insolens expetenda euripidis sit ne, nec et option aperiri, id vel verear verterem imperdiet.", 
     price: "₹654", 
     image: "images/pizza.jpg" 
    }, 
    { 
     title: "Pizza4", 
     description: "Lorem ipsum dolor sit amet, insolens expetenda euripidis sit ne, nec et option aperiri, id vel verear verterem imperdiet.", 
     price: "₹785", 
     image: "images/pizza.jpg" 
    }, 
    { 
     title: "Pizza5", 
     description: "Lorem ipsum dolor sit amet, insolens expetenda euripidis sit ne, nec et option aperiri, id vel verear verterem imperdiet.", 
     price: "₹687", 
     image: "images/pizza.jpg" 
    } 
]; 


var ItemContainer = React.createClass({ 
    render: function(){ 
     var items = []; 
     for (var i = 0; i < items.length; i++) { 
      items.push(<Item source={Pizzas[i].image} title={Pizzas[i].title} desc={Pizzas[i].description} price={Pizzas[i].price} key={i}/>) 
     } 
     return(
      <div className="items"> 
       {items} 
      </div> 
     ) 
    } 
}); 

var MainContent = React.createClass({ 
    render: function(){ 
     <div className="main-content"> 
      <Header/> 
      <ScrollBar/> 
      <ItemContainer/> 
     </div> 
    } 
}); 

ReactDOM.render(<MainContent/>,document.getElementById('workspace')); 

私はReactDOM.renderでヘッダー、スクロールバーとItemContainerでMainContentのを交換し、彼らが個別にレンダリングされてきています。しかし、MainContentはレンダリングされておらず、これはエラーです：

Uncaught Invariant Violation: MainContent.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

なぜそれが起こっているのか説明してください。

Answer 1

あなたは、あなたのMainContentrender関数からの復帰を意味していない、あなたのMainContentはundefinedを返して：あなたは、あなたのMainContentからreturn有効なリアクト要素に必要

var MainContent = React.createClass({ 
    render: function(){ 
     return (
      <div className="main-content"> 
       <Header/> 
       <ScrollBar/> 
       <ItemContainer/> 
      </div> 
     ) 
    } 
}); 

Answer 2

。以下を実行してください...

var MainContent = React.createClass({ 
    render: function(){ 
     return <div className="main-content"> 
      <Header/> 
      <ScrollBar/> 
      <ItemContainer/> 
     </div> 
    } 
});