React 篇 Comment Model

Model 原型

　　Comment Box

　　<div className="commentBox">

　　　　<h1>Comments</h1>

　　　　<CommentList />

　　　　<CommentForm/>

　　</div>

React中，可以定义类似的模型

在这里我们可以看到我们熟悉的模型，例如 div h1,但是也能看到我们自定义的CommentList CommentForm.

而对于这个CommentList呢，自己又需要重新定义这个一个字模型，当然，他最后呈现的是一个数组，多条记录的显示，类似论坛里面我们看到的一条条记录。

完整的CommentList定义。

var CommentList=React.createClass({
    render:function(){
    var commentNodes=this.props.data.map(function(comment,index){
        return (
        <Comment author={comment.author} key={index}>
            {comment.text}
        </Comment>
    );
    });
    return (
        <div className="commentList">
        {commentNodes}
    </div>
    );
    }
});其中又包含了Comment定义

var Comment = React.createClass({
    render:function(){
var rawMarkup=converter.makeHtml(this.props.children.toString());
    return (
     <div className="comment">
        <h2 className="commentAuthor">
            {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html:rawMarkup}}/>
    </div>
    );
    }
});

我们能看到，到这里算是告一段落了。

所以这里主要展示React的基本结构，可以自定义一些tag，然后对每个新tag构建自己的html结构。如此html构建起来更加自由，且有一些面向对象的思想在里面了。

转载于:https://www.cnblogs.com/hellocz/p/4330108.html