有效的 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 中用 Header、ScrollBar 和 ItemContainer 替换了 MainContent，它们分别被渲染。但是 MainContent 没有呈现，这是错误：

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

请解释为什么会这样？

Answer 1

你没有从你的MainContentrender函数返回，这意味着你的MainContent正在返回undefined：

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

Answer 2

你需要 return 来自 MainContent 的有效 React 元素。执行以下操作...

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