查漏补缺React

22. 十一月 2017 React 0

React.Children

React.Children 是顶层API之一,为处理 this.props.children 这个封闭的数据结构提供了有用的工具,这个顶层API是我之前项目中用的比较少的一个。

this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点。操作children 使用React.Children 比较方便。

常用的一下几个:

React.Children.map 

React.Children.forEach

使用方法和map一样,只是没有返回对象

React.Children.count

返回 children 当中的组件总数,和传递给 map 或者 forEach 的回调函数的调用次数一致。

使用方式:React.Children.count(this.props.children) // 2

React.Children.only

React.Children.only(object children)

返回 children 中 仅有的子级。否则抛出异常。

这里仅有的子级,only方法接受的参数只能是一个对象,不能是多个对象(数组)。

返回值取决于你传递的值,并不是只有一个子组件才能使用。

 

这里需要注意, this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object

 

 

 

 

 


发表评论

电子邮件地址不会被公开。