React_CommentDemo
这是一个使用react实现的评论框组件
##目录结构
1.需求
2.分析
3.编码
4.页面
5.组件
6.渲染
**实现这样一个简易的评论框组件** 1.需求
![](introImg/comment.gif)
编写React就是不断构建组件的过程,首先根据需求进行UI的划分: 2.分析
-Box
-FormBox
-ItemBox
评论框内容的处理采用了数据模拟的方式,并未和服务器交互处理 3.编码
Blog/blog_data.json ```javascript [{ "author": "小M", "text": "这是第二条评论", "avatar": "avatar.png", "time": "2016/1/19 上午5:46:38" }, { "author": "小P", "text": "这是一条评论", "avatar": "avatar.png", "time": "2016/1/18 下午5:46:38" },{ "author": "小小", "text": "这是0条评论", "avatar": "avatar.png", "time": "2016/1/18 下午4:46:38" }] ```
```html <title>评论框</title> <script src="../js/vendor/react.js"></script> <script src="../js/vendor/react-dom.js"></script> <script src="../js/vendor/jquery.min.js"></script> <script src="../js/vendor/JSXTransformer.js"></script> ``` 4.页面
**Box** ```js var Box = React.createClass({ getInitialState: function(){ return {data: []} }, loadFromServer: function(){ $.ajax({ url: this.props.url, dataType: "json", success: function(data){ this.setState({data: data}); }.bind(this), error: function(){ console.log("出错啦!"); }.bind(this) }); }, componentDidMount: function(){ this.loadFromServer(); //setInterval(this.loadFromServer, 3000); }, handlerSubmit: function(t){ this.state.data.unshift(t); console.log( this.state.data); this.setState({data: this.state.data}); return; }, render: function(){ return ( 5.组件
Comments
FormBox
var FormBox = React.createClass({
handlerFormSubmit: function(e){
e.preventDefault();
var content = this.refs.comment.value.trim();
var commentAuthor = this.refs.commentAuthor.value.trim();
if(!content){
alert("输入的信息不能为空啦~");
return;
}
if(!commentAuthor){
alert("请填写姓名");
return;
}
var t = new Date();
t = t.toLocaleString();
var sj = {
"author": commentAuthor,
"text": content,
"avatar": "avatar.png",
"time": t
}
this.props.onFormSubmit(sj);
this.refs.comment.value = "";
this.refs.commentAuthor.value = "";
},
render: function(){
return (
<form method="post" className="formBox" onSubmit={this.handlerFormSubmit}>
<textarea name="comment" className="comment" ref="comment"
placeholder="say you want to say..."></textarea>
<lable className="authorName">
<input type="text" placeholder="your name" ref="commentAuthor"/>
</lable>
<input type="submit" value="发表" className="btn" />
</form>
)
}
});
ItemBox
var ItemBox = React.createClass({
render: function(){
var itemInfo = this.props.data.map(function(t){
return (
<li key={t.author}>
<div>
<div className="fl">
<img src={t.avatar} alt="头像" />
</div>
<div className="fr">
<span className="name">{t.author}</span>
<span className="time">{t.time}</span>
<div className="msg">
{t.text}
</div>
</div>
</div>
</li>
)
});
return (
<ul className="item">{itemInfo}</ul>
)
}
});