用TypeScipt和AMD模块化理念实现React官方教程(三)静态页面

现在我们可以象用C#开发那样来开发React应用了，我们的目的就是将 React官方教程整个迁移到typescript上实现：

创建第一个组件

在IDE的新建项中，我们可以找到TypeScript JSX文件，扩展名为tsx，如图：

在js目录下创建如下文件：
CommentBox.tsx
现在我们不需要象原教程那样命名.js文件了。完全可以按类来命名文件，这就是发挥TypeScript中Type 的力量的时候了！
文件内容如下：

/// <reference path="../typings/react/react-global.d.ts"/>
export =CommentBox;
class CommentBox extends React.Component<any, any> {
    render() {
        return <div className="commentBox">我是一个评论框。 </div>;
    }
}

注意HTML元素我们用小写字母开头，而自定义的Ract类我们用大写字母开头。
另外创建如下文件作为主文件：
main.tsx
文件内容如下：

/// <reference path="../typings/react/react-global.d.ts"/>
import CommentBox = require("./CommentBox");
ReactDOM.render(<CommentBox />, document.getElementById('content'));

这时点按运行，不出意外的话，浏览器将显示正常结果，内容为：我是一个评论框。

组合组件

让我们跟随示例创建CommentList 和 CommentForm如下：

CommentList.tsx
文件内容如下：

/// <reference path="../typings/react/react-global.d.ts"/>
export =CommentList;
class CommentList extends React.Component<any, any> {
    render() {
        return <div className="commentList">你好，我是一个评论列表。</div>;
    }
}

CommentForm.tsx

文件内容如下：

/// <reference path="../typings/react/react-global.d.ts"/>
export =CommentForm;
class CommentForm extends React.Component<any, any> {
    render() {
        return <div className="commentForm">你好，我是一个评论表单。</div>;
    }
}

接下去修改CommentBox.tsx，如下：

/// <reference path="../typings/react/react-global.d.ts"/>
import CommentList = require("./CommentList");
import CommentForm = require("./CommentForm");
export =CommentBox;
class CommentBox extends React.Component<any, any> {
    render() {
        return (
            <div className="commentBox">
                <h1>评论</h1>
                <CommentList />
                <CommentForm />
            </div>
        );
    }
}

使用props

现在让我们他建Comment组件，它将使用从父组件那里传入的数据。从父组件那里传入的数据将作为”属性(propery)”存在于子组件中。这些属性(properties)通过this.props访问。使用props，我们可以从CommentList传入的数据读取到Comment中，将生成一些标记：

Comment.tsx
文件内容如下：

/// <reference path="../typings/react/react-global.d.ts"/>
export =Comment;
class Comment extends React.Component<any, any> {
    render() {
        return (
            <div className="comment">
                <h2 className="commentAuthor">
                    {this.props.author}
                    </h2>
                {this.props.children}
            </div>
        );
    }
}

组件属性

上面我们已经定义好了Comment 组件，我们想要将作者名字和评论文本传入。这样可以让我们为每个单独的评论重用想同的代码。现在让我们在CommentList中添加一些评论：
CommentList.tsx

/// <reference path="../typings/react/react-global.d.ts"/>
import Comment = require('./Comment');
export =CommentList;
class CommentList extends React.Component<any, any> {
    render() {
        return (
            <div className="commentList">
            <Comment author="Eureka Chen">这是其中一个评论</Comment>
            <Comment author="Jordan Walke">这是 *另一个* 评论</Comment>
            </div>
        );
    }
}

添加Markdown解析

在index.html我们引用了第三方的marked库，将Markdown文件转化为Html。将comment.tsx改写成：

/// <reference path="../typings/react/react-global.d.ts"/>
/// <reference path="../typings/marked/marked.d.ts"/>
export =Comment;
class Comment extends React.Component<any, any> {
    render() {
        return (
            <div className="comment">
                <h2 className="commentAuthor">
                    {this.props.author}
                </h2>
                { marked(this.props.children.toString())}
            </div>
        );
    }
}

注意在html中添加对maked.js的引用。
现在我们得到如图示的结果：

但是这里有个问题！从如图的输出中，直接输出了Html标签。我们需要他们生成Html。这是因为React防止XSS攻击，这里有个方法，但框架警告你不要这样。

/// <reference path="../typings/react/react-global.d.ts"/>
/// <reference path="../typings/marked/marked.d.ts"/>
export =Comment;
class Comment extends React.Component<any, any> {
    rawMarkup() {
        var rawMarkup = marked(this.props.children.toString(), { sanitize: true });
        return { __html: rawMarkup };
    }

    render() {
        return (
            <div className="comment">
                <h2 className="commentAuthor">
                    {this.props.author}
                </h2>
                <span dangerouslySetInnerHTML={this.rawMarkup() } />
            </div>
        );
    }
}

这是API特意让原生HTML难以插入，但marked可以利用这个后门。

挂接到数据模型

到现在我们是直接在源代码中插入评论。现在，让我们使用JSON数据插入评论中。最终这些数据会来自服务器，但现在，我们写在源码中：

我们在main.tsx中加入data，如下：

/// <reference path="../typings/react/react-global.d.ts"/>
import CommentBox = require("./CommentBox");
var data = [
    { id: 1, author: "Eureka Chen", text: "这是一个评论" },
    { id: 2, author: "Jordan Walke", text: "这是 *另一个* 评论" }
];

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

然后在CommentBox.tsx中改为：

/// <reference path="../typings/react/react-global.d.ts"/>
import CommentList = require("./CommentList");
import CommentForm = require("./CommentForm");
export =CommentBox;
class CommentBox extends React.Component<any, any> {
    render() {
        return (
            <div className="commentBox">
                <h1>评论</h1>
                <CommentList data={this.props.data} />
                <CommentForm />
            </div>
        );
    }
}

现在数据传到了CommentList，让我们动态生成评论，CommentList.tsx如下：

/// <reference path="../typings/react/react-global.d.ts"/>
import Comment = require('./Comment');
export =CommentList;
class CommentList extends React.Component<any, any> {
    render() {
        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>
        );
    }
}

最终结果如下：

下一次我们开始讲从服务器获取数据。