• Type of the Children props

    Type of the Children props

    Usually, a component’s children (this.props.children) is an array of components:

    1. var GenericWrapper = React.createClass({
    2.   componentDidMount: function() {
    3.     console.log(Array.isArray(this.props.children)); // => true
    4.   },
    6.   render: function() {
    7.     return <div />;
    8.   }
    9. });
    11. ReactDOM.render(
    12.   <GenericWrapper><span/><span/><span/></GenericWrapper>,
    13.   mountNode
    14. );

    However, when there is only a single child, this.props.children will be the single child component itself without the array wrapper. This saves an array allocation.

    1. var GenericWrapper = React.createClass({
    2.   componentDidMount: function() {
    3.     console.log(Array.isArray(this.props.children)); // => false
    5.     // warning: yields 5 for length of the string 'hello', not 1 for the
    6.     // length of the non-existent array wrapper!
    7.     console.log(this.props.children.length);
    8.   },
    10.   render: function() {
    11.     return <div />;
    12.   }
    13. });
    15. ReactDOM.render(<GenericWrapper>hello</GenericWrapper>, mountNode);

    To make this.props.children easy to deal with, we’ve provided the React.Children utilities.