Geek Answers Handbook

React: what are the use cases when we need a React.Children api

Just try to find any use case for React.Childrenapi. Reading documents is confusing. (React v. 15.2.0)

https://facebook.imtqy.com/react/docs/top-level-api.html#react.children

Here they say that it this.props.childrenis an opaque data structure. But when debugging in chrome dev tools, it looks like this: children- this is an array. Therefore, functions like React.Children.mapor React.Children.toArraydo not make much sense, since Array.prototype.map can be used instead of the former, and the latter produces the same result as the original property children.

It seems to me that the documents are outdated (I did not use the reaction of 0.14. *, So I do not know what the situation was there), or I am missing something. We will be glad if someone can explain.

Thank.

+4
source share
2 answers

React.Children, as the documentation explains, is a collection of utilities for child components. In this case (jsx):

<div>
  <span>Foo</span>
  <span>Bar</span>
</div>

Yours div childrenwill be an array of two spans. Consider the self-closing component:

<div>
   <SomeCustomElement/>
</div>

In this case, it divhas one child, but this.props.childrenin SomeCustomElementwill null. Therefore, an attempt to call this.props.children.mapin some cases will cause an error, since childrenprop does not follow a strict type convention.

React.Children . "" ( ), , , , this.props.children null, , - , if, switch , . , . , - , null, , ..

+1

JavaScript . , React , children , : .

API React.Children, , .

API React.Children Array, , , React.

+3

More articles:


All Articles