Shulou(Shulou.com)05/31 Report--

This article mainly explains the "React component Props type case analysis", the article explains the content is simple and clear, easy to learn and understand, now please follow the editor's train of thought slowly in depth, together to study and learn "React component Props type case analysis"!

Typically, the subcomponents of a component of a React are a set, that is, an array. Look at the following example

Var GenericWrapper = React.createClass ({

ComponentDidMount: function () {

Console.log (Array.isArray (this.props.children)); / / = > true

}

Render: function () {

Return

}

});

ReactDOM.render (

Document.getElementById ('content')

);

The component GenericWrapper has three subcomponents, so the result of the above example will print out true on 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, it is not an empty array without subcomponents, 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

}

});

ReactDOM.render (

Document.getElementById ('content')

);

That is, the above result is to output false on the console.

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

Var GenericWrapper = React.createClass ({

ComponentDidMount: function () {

Console.log (Array.isArray (this.props.children)); / / = > false

}

Render: function () {

Return

}

});

ReactDOM.render (

Document.getElementById ('content')

);

What is printed here on the console is false. Because in this case span is a child element of div, it does not have child components for the component GenericWrapper. So this.props.children is not an array.

In cases where a component has no child components, this.props.children is undefined.

Var GenericWrapper = React.createClass ({

ComponentDidMount: function () {

Console.log (this.props.children); / / = > undefined

}

Render: function () {

Return

}

});

ReactDOM.render (

Document.getElementById ('content')

);

The result printed on the console is undefined.

Thank you for your reading, the above is the content of "React component Props type instance analysis". After the study of this article, I believe you have a deeper understanding of the problem of type instance analysis of React component Props, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.