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構建起來更加自由，且有一些物件導向的思想在裡面了。

React 篇 Comment Model