javascript - 有效的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 未呈现，这是错误:

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

您没有从 MainContent render 函数返回，这意味着您的 MainContent 返回 undefined:

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