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

来源：互联网发布：数据交换架构编辑：程序博客网时间：2024/06/15 07:04

定义蒙版组件：

// 遮罩组件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"));

0 0