React入门 (二) 创建一个评论模块

创建一个评论模块，包含评论展示实时刷新，评论表单并可以提交

一个简单的评论功能

我们做一个简单的React评论功能，能列表展示评论，有个表单填写评论并发表，当然，数据应该在后台，不过我们先在前端写死。

首先我们创建一个comment class：

var Comment = React.createClass({
    author:"author",
    render: function () {
        return (
            <div className="comment">
                <h2 className = "commentAuthor">
                {this.props.author}
                </h2>

               {this.props.children}
            </div>
        );
    }
});

可以看到，这个组件相当于list列表中的每一条item，含有标题，评论内容

然后我们创建一个comment list，即评论列表：

var CommentList = React.createClass({
    render: function () {
        return(
            <div className="commentList">
                <Comment author = "Tom">this is one comment</Comment>
                <Comment author = "John">this is *anther* comment</Comment>
            </div>
        )
        ;
    }
});

可以看到，我们暂时写死了两条评论，author分别为Tom和John，并且给他们的children也赋了值

创建一个表单：

var CommentForm = React.createClass({
    render: function () {
        return (
            <div className="commentForm">
                Hello,world,I am a Comment Form.
            </div>
        );
    }
});

创建一个整体的面板装载评论列表和表单：

var CommentBox = React.createClass({
    render: function () {
        return (
            <div className="commentBox">
            <h1>Comments</h1>
                <CommentList/>
                <CommentForm/>
            </div>
        );
    }
});

在浏览器里，我们可以看到已经出现了两条数据。

接入Markdown格式，Markdown是一款轻量级编辑插件，可以让写作更加注重内容而不是格式，我们引入它：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>

然后我们将评论组件里的评论内容，用Markdown转换一下:

var Comment = React.createClass({
    author:"author",
    render: function () {
        return (
            <div className="comment">
                <h2 className = "commentAuthor">
                {this.props.author}
                </h2>

            {marked(this.props.children.toString())}
            </div>
        );
    }
});

但是，我们的评论内容在浏览器里变成了这种：

<p>this is one comment</p>

<p>this is <em>anther</em> comment</p>

。。。显然我们的评论被渲染成了字符串，但是我们想把他们变成html啊亲，这是因为React为了保护不受XSS攻击，有一个办法可以解决，但是框架会警告你别使用这种方法：

var Comment = React.createClass({
    rawMarkup: function () {
        var rawMarkup = marked(this.props.children.toString(),{sanitize:true});
        return {__html:rawMarkup};
    },
    render: function () {
        return (
            <div className="comment">
                <h2 className = "commentAuthor">
                {this.props.author}
                </h2>

                <span dangerouslySetInnerHTML={this.rawMarkup()}/>
            </div>
        );
    }
});

我们使用了一个API，marked(str,config)，传入sanitize:true，告诉了marked转义掉评论中的HTML标签，而不是原封不动的返回这些标签。

下面我们在列表中动态的展示评论，创建一个评论数组：

var data = [
    {author:"Tom",text:"This is Tom's comment"},
    {author:"John",text:"This is John's comment"}
];

我们修改ReactDOM.render，将数组传给CommentBox

ReactDOM.render(
    <CommentBox data = {data}/>,
    document.getElementById('example')
);

再修改CommentBox，将数组传给CommentList

var CommentBox = React.createClass({
    render: function () {
        return (
            <div className="commentBox">
            <h1>Comments</h1>
                <CommentList data = {this.props.data}/>
                <CommentForm/>
            </div>
        );
    }
});

最后修改CommentList，直接放进一个数组

<span style="font-size:12px;">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>
        )
        ;
    }
});</span>

可以看到，在CommentList这个组件中的render方法中，我们使用了Array.prototype.map = function(callback,thisArg){};这个方法，创建了一个装载
Comment组件的数组，这个方法好像是ES5中新增的，在遍历数组的同时可以使用callback方法对数组中的元素进行处理，还可以将处理后的数据再次装载到一个数组中：

var data1 = [
    {author:"1"},
    {author:"2"},
    {author:"3"},
    {author:"4"}
];

var s = data1.map(function (comment) {
    comment.author = comment.author + "后缀";
    //console.log(comment);
    return comment.author;
});

console.log("s:" + s);

可以看到，我们调用data1.map,当callback方法中有return的时候，就将这些return的放入到了s数组中，打印出来的结果是

s:1后缀,2后缀,3后缀,4后缀

看了下，这章的篇幅已经挺长了，所以从服务器获取数据我们放在下一章 React入门(二) 评论模块续