React 数据模型：key-value

Question

在前面我们已经提到了使用属性值的方式保存和传递数据，那如果数据来自 HTML 外部或者服务器呢？我们用一种模块化的方式将数据传递：

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

从的 render() 方法中传递给 CommentList 子组件的方法是：在实例化的时候加入 key-value 参数：

<div className="commentBox">
    <h1>Comments</h1>
    <CommentList data={this.props.data} />
    <CommentForm />
</div>

在最终渲染的时候再加入 data 数值就可以将源代码中组件外的数据一直传递到最终的 CommentList 子组件了：

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

在子组件中就可以渲染该数据：

var commentNodes = this.props.data.map(
function (comment) {
    return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
    );
});

如果数据来自于服务器就需要在渲染的时候使用获取数据的 URL：

React.render(
  <CommentBox url="comments.json" />,
  document.getElementById('content')
);