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

定义蒙版组件：

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

设置蒙版的css样式:

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

在reactJS渲染的时候判断，是否显示”正在加载…”

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

    }

movice数组里有数据了，说明ajax已成功获取到了数据。

最后全部js代码：

// 创建组件
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")
);