javascript - ReactJS 错误 : Invariant violation

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

您缺少返回语句。

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