http://blog.csdn.net/zhouziyu2011/article/details/70502495实现了简单的评论框,但实现的只是在代码里直接插入评论数据。
实际情况是,评论数据应该是来自服务器的 JSON 数据,现在不考虑服务器,直接将 JSON 数据写在代码中:
// 模拟服务器返回的JSON数据
var data = [
{id: 1, author: "Alice", text: "This is Alice's comment"},
{id: 2, author: "Bruce", text: "This is Bruce's comment"}
];
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>CommentBox</h1>
<CommentList data={this.props.data} />
<CommentForm />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return <Comment author={comment.author} key={comment.id}>{comment.text}</Comment>
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h3>{this.props.author}</h3>
{this.props.children}
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
CommentForm
</div>
);
}
});
ReactDOM.render(
<CommentBox data={data}/>,
document.getElementById('commentBox')
);