JIYIK CN >

Usually, the subcomponents of a React component are a group, that is, the subcomponents are an array. See the following example

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')
);

The GenericWrapper component has three subcomponents , so the above example will print true in the console.

Although its subcomponent is an array, if its subcomponent has only one component, it does not mean that there is only one element in the array, but that this.props.children is not an array. In other words, if there is only itself and no subcomponents, it is not an empty array, and this. props .children itself is not an array.

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

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

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

In other words, the above result will output false in the console.

However, there is one thing to note here: we are talking about the subcomponents of the component, not the child elements. We can get the subcomponents through this.props.children, but we cannot get the child elements.

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

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

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

Here, false is printed in the console. This is because in this example, span is a child element of div, and the GenericWrapper component has no child components. So this.props.children is not an array.

For a component with no child components, this.props.children is undefined.

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

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

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

The result printed out by the console is undefined.

The content of this article is relatively simple, and I hope it will be helpful to everyone.