Question

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

未捕获错误：不变违规：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>
    }
});

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

ReactJS错误：不变违规

1 个答案: