前端之家收集整理的这篇文章主要介绍了
初试MVVM框架之React入门【南大软院大神养成计划】,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
- var data = [
- {author: "Pete Hunt",text: "This is one comment"},{author: "Jordan Walke",text: "This is *another* comment"}
- ];
- var Comment = React.createClass({
- render: function () {
- return (
- <div className="comment">
- <h2 className="commentAuthor">
- {this.props.author}
- </h2>
- {this.props.children}
- <hr/>
- </div>
- )
- }
- });
- var CommentBox = React.createClass({
- render: function () {
- return (
- <div className="commentBox">
- <h1>Comments</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}>
- {comment.text}
- </Comment>
- )
- })
- return (
- <div className="commentList">
- {commentNodes}
- </div>
- )
- }
- });
- var CommentForm = React.createClass({
- render: function () {
- return (
- <div className="commentForm">
- Hello I'm a commentForm. </div> ) } }); //React的render ReactDOM.render( <CommentBox data={data}/>,document.getElementById('content') );