通常、コンポーネントの子(this.props.children)はコンポーネントの配列になります。

var GenericWrapper = React.createClass({
  componentDidMount: function() {
    console.log(Array.isArray(this.props.children)); // => true
  },

  render: function() {
    return <div />;
  }
});

React.render(
  <GenericWrapper><span/><span/><span/></GenericWrapper>,
  mountNode
);

ただし、単一の子だけが存在する場合は、配列にラップされること無くthis.props.childrenは単一の子コンポーネントになります。 これは配列割り当ての手間を省くことに繋がります。

var GenericWrapper = React.createClass({
  componentDidMount: function() {
    console.log(Array.isArray(this.props.children)); // => false

    // 注意: 存在しないラッパーとなる配列のlengthの1では無く、
    //       文字列'hellow'の長さである5が出力されます。
    console.log(this.props.children.length);
  },

  render: function() {
    return <div />;
  }
});

React.render(<GenericWrapper>hello</GenericWrapper>, mountNode);

this.props.childrenを簡単に扱えるように、 我々はReact.Childrenユーティリティを提供しています。

 Back to top