React


Using props


コンポーネントの構造は


Comment コンポーネントを作成します, このコンポーネントは親コンポーネントから受け渡されるデータに依存します。 親コンポーネントから受け渡されたデータは子コンポーネントの ’プロパティ’ として利用できます。 this.props を通じてプロパティにアクセスします。 props を使って, CommentList から Comment へ渡されたデータを読み、HTML へ出力します

javascript

var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </div>
    );
  }
});

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author} // 属性名で値にアクセス
        </h2>
        {this.props.children} // ネストされた要素へアクセス
      </div>
    );
  }
});