您的位置：首页 > Web前端 > React

初识ReactJS的组件化开发(五):ajax加载评论列表，并定时获取更新

2016-07-30 21:07 836 查看

js代码如下:

// 创建组件
var NavBar = React.createClass({
loadMovie: function () {
ReactDOM.render(
<MovieList src="http://localhost/myphp/movies.php" />,
document.getElementById("container")
)
},

loadReview: function () {
ReactDOM.render(
<ReviewList src="http://localhost/myphp/reviews.php" />,
document.getElementById("container")
)
},

render: function(){
return <ul>
<li><a href="#" onClick={this.loadMovie}>最新电影</a></li>
<li><a href="#" onClick={this.loadReview}>最新评论</a></li>
<li><SearchText  cssClass={this.props.searchTextCss} placeholder={this.props.searchTextPlaceHolder} /></li>
</ul>
}
});

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

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

componentDidMount: function () {
$.get(this.props.src,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 id="movielist">{lis}</ul>
}

}
});

// 电影评论组件
var ReviewList = React.createClass({
getInitialState: function () {
return {
review:[] //保存电影json对象数组
};
},

componentDidMount: function () {
setInterval(function () {
$.get(this.props.src,null,function (ret) {
this.setState({review:ret});
}.bind(this))
}.bind(this),3000);
},

render: function(){
if(this.state.review.length == 0){
//代表还没有完成 数据交互,显示一个蒙版
return <PageMask />
}else{
var lis = this.state.review.map(function (r) {
return <li><span className="author">{r.user}</span><span>{r.content}</span></li>
})
return <ul id="reviewList">{lis}</ul>
}

}
});

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

ReactDOM.render(
// 使用组件
<NavBar searchTextCss="search_text2" searchTextPlaceHolder="请输入关键字" />,
document.getElementById("navbar")
);

html代码如下：

<!DOCTYPE html>
<html>
<head>
<title>初始</title>
<meta charset="utf-8">
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

<script src="node_modules/zepto/dist/zepto.min.js"></script>

<style type="text/css">
*{padding: 0;margin: 0}
#navbar{position: fixed;top: 0;left: 0;width: 100%;height: 60px;background-color: #222;}
#navbar li{float: left;line-height: 60px;margin-left: 10px;display: inline-block;}
#navbar li a{color: #fff;text-decoration: none;}
/*searchtext的样式*/
.search_text{height: 25px;border-radius: 5px;}
.search_text2{height: 25px;border-radius: 5px;background-color: beige}

#container{margin: 70px auto;}
#container p{text-align: center;}

#movielist .title{font-weight: bold;font-size: 18px;}
#movielist .intro{text-indent: 2em;color: gray;border-bottom: 1px dashed #dddddd;text-align: left;padding: 10px;}

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

#reviewList{width: 80%;margin: 10px auto;}
#reviewList li{line-height: 24pt;float: left;width: 100%;display: block;border: 1px solid #dddddd;margin-top: 16px;text-indent: 2em;}
#reviewList li .author{color: gray;margin-left: 5px;}
</style>
</head>
<body>
<div id="navbar"></div>

<div id="container">

</div>

<div id="footer"></div>

<script type="text/babel" src="src/nav.js"></script>
</body>
</html>

php代码如下：

<?php
header("Access-Control-Allow-Origin:*");
header("Content-type: application/json");

$r1['content'] = "这个电影很好看啊";
$r1['user'] = "张三";

$r2['content'] = "这个电影很好看啊这个电影很好看啊这个电影很好看啊";
$r2['user'] = "李思";

$r3['content'] = "这王武的评论";
$r3['user'] = "王武";

// 加入大数组
$data[] = $r3;
$data[] = $r1;
$data[] = $r2;

die(json_encode($data,JSON_UNESCAPED_UNICODE));

效果演示:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航