ReactのParentとChildコンポーネントをもう少し考察

このエントリーをはてなブックマークに追加

前回のReactでコンポジションにてParentとChildコンポーネントに少し触れましたが、今回はもう少しコードをいじりながら挙動を確かめたいと思います。

コンポーネント内に記述された要素は、そのコンポーネントにて「this.props.children」で取得できるというところがポイントです。また、この「this.props.children」はそのままで使うのではなく、React.Childrenにて便利メソッドが用意されているので、使っていくのが良さそうです。
以下、ParentコンポーネントとChildコンポーネントの挙動をわかりやすくした(つもり)のコードです。

特に最初少し慣れなかった部分は、Childコンポーネントの中に記述しているdivコンポーネントの扱いについてです。一見するとChildコンポーネントの中でこのdivが出力されるかと思うのですが、Childが例えば以下ののコードだけの場合、このdivは出力されません。

var Child = React.createClass({
  render: function() {
    return (
      <div>
        <h2>Child Content Start</h2>
        <h2>Child Content Ends</h2>
      </div>
    );
  }
});

 

ではこのChildコンポーネントに挟まれているdivコンポーネントは何なのかというと、ChildコンポーネントのChildrenなのです(ややこしい表現になってきましたね)。コンポーネントタグの中に記述されたコンポーネントはそのコンポーネントの中でthis.props.childrenとしてアクセスが可能になるのです。よって、このdivはChildコンポーネント内でアクセスして、div要素を出力していることになります。

Written on February 26, 2015
このエントリーをはてなブックマークに追加