Type of the Children props Back

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

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

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

ReactDOM.render(
    <GenericWrapper><span/><span/><span/></GenericWrapper>,
    document.getElementById('content')
);

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.

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

        /**
         * warning: yields 5 for length of the string 'hello', not 1 for the
         * length of the non-existent array wrapper!
         */
        console.log(this.props.children.length);
    },

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

ReactDOM.render(
    <GenericWrapper>hello</GenericWrapper>,
    document.getElementById('content')
);

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

Comments Copyright © aleen42 all right reserved, powered by aleen42

Empty Comments

Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.

authorize