ReactJS错误:不变量冲突

ReactJS error: Invariant violation

本文关键字：冲突 不变量 错误 ReactJS      更新时间：2023-09-26

我正在用React JS构建一个应用程序，到目前为止我很喜欢它。然而，我得到了一个错误，我很难确定我做错了什么。这是我的错误:

Uncaught Error: Invariant Violation: ImageList.render():必须返回一个有效的ReactComponent。

返回的可能是undefined、数组或其他无效对象。

这是我的代码:

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

您缺少一个返回语句。

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>
        );
    }
});
相关文章：