浅谈React实现评论框（二）

来源：互联网发布：mac ftp 看不到文件夹编辑：程序博客网时间：2024/06/05 19:19

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

1 0