Javascript 嵌套时未呈现的有效组件

我在渲染组件组合时遇到此错误。我找不到错误在哪里。我做错了什么？如何通过从控制台读取来读取错误的确切位置

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

var Hamburger=React.createClass({
render:function（）{
返回(
)
}
});
var Search=React.createClass({
render:function（）{
返回(
)
}
});
var Cart=React.createClass({
render:function（）{
返回(
)
}
});
var Header=React.createClass({
render:function（）{
返回(
)
}
});
//类别滚动条
var Tab=React.createClass({
render:function（）{
返回(
{this.props.name}

)
}
})
var tabNames=[“蔬菜披萨”、“非EG披萨”、“披萨狂热”、“汉堡披萨”、“配菜和饮料”]；
var ScrollBar=React.createClass({
render:function（）{
var标签=[]；
对于（var i=0；i

我在ReactDOM.render中将MainContent替换为Header、ScrollBar和ItemContainer，它们将分别被渲染。但MainContent未呈现，这是错误：

未捕获不变冲突：MainContent.render（）：有效的React 元素（或null）必须返回。您可能返回了未定义的， 数组或其他无效对象

---

请解释发生的原因？

您没有从

MainContent

render

函数返回，这意味着您的

MainContent

正在返回

未定义的
：

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

var MainContent=React.createClass({
render:function（）{
返回(
)
}
});
您没有从
MainContent
render
功能返回，这意味着您的
MainContent
正在返回
未定义的
：

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

var MainContent=React.createClass({
render:function（）{
返回(
)
}
});
您需要
从
MainContent
返回有效的React元素。请执行以下操作

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

var MainContent=React.createClass({
render:function（）{
返回
}
}); 
您需要
从
MainContent
返回有效的React元素。请执行以下操作

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

var MainContent=React.createClass({
render:function（）{
返回
}
}); 
React中的返回语句如果跨越多行，则必须用括号括起来。这将引发错误。您返回的是单个节点。它不需要括号。它不会抛出错误。你自己试试吧！React中的返回语句如果跨越多行，则必须用括号括起来。这将引发错误。您返回的是单个节点。它不需要括号。它不会抛出错误。你自己试试吧！