初识ReactJS的组件化开发(四):ajax加载电影列表时显示"正在加载"

// 遮罩组件
var PageMask = React.createClass({
render: function () {
return <div className="mask"><p>正在加载...</p></div>
}
});

.mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: gray;opacity: 0.5;z-index: 999;}
.mask p{width: 20%;height: 30px;line-height: 3px;margin: 0 auto;margin-top: 30%;opacity: 1.0;}

render: function(){
if(this.state.movie.length == 0){
//代表还没有完成 数据交互,显示一个蒙版
return <PageMask />
}else{
var lis = this.state.movie.map(function (m) {
return <li><p className="title">{m.movieName}</p><p className="intro">{m.movieIntro}</p></li>
})
return <ul>{lis}</ul>
}

}

// 创建组件
var NavBar = React.createClass({
liClick: function () {
alert('组件');
},
render: function(){
return <ul>
<li><a href="">最新电影</a></li>
<li><a href="" onClick={function(){alert('组件')}}>最新评论</a></li>
<li><SearchText cssClass="search_text2" /></li>
</ul>
}
});

// 搜索框组件
var SearchText = React.createClass({
render: function(){
return <input type="text" placeholder="请输入关键字" className={this.props.cssClass}/>
}
});

// 电影列表组件
var MoiveList = React.createClass({
getInitialState: function () {
return {
movie:[] //保存电影json对象数组
};
},

componentDidMount: function () {
$.get("http://localhost/myphp/movies.php",null,function (ret) {
this.setState({movie:ret});
}.bind(this))
},

render: function(){
if(this.state.movie.length == 0){
//代表还没有完成 数据交互,显示一个蒙版
return <PageMask />
}else{
var lis = this.state.movie.map(function (m) {
return <li><p className="title">{m.movieName}</p><p className="intro">{m.movieIntro}</p></li>
})
return <ul>{lis}</ul>
}

}
});

// 遮罩组件
var PageMask = React.createClass({
render: function () {
return <div className="mask"><p>正在加载...</p></div>
}
});

ReactDOM.render(
// 使用组件
<NavBar />,
document.getElementById("navbar")
);

ReactDOM.render(
<MoiveList />,
document.getElementById("movielist")
);