浅谈React实现评论框（二）

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')
);