React - React.Children

React.Children详解

1. React.Children是顶层API之一，为处理this.props.children这个封闭的数据结构提供了有用的工具，它是react提供的一个工具方法。

2. this.props对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children属性。
   this.props.children，它表示组件的所有子节点，可以为任何数据（组件、字符串、函数等等）。

3. this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。
   我们可以用React.Children.map来遍历子节点，而不用担心this.props.children的数据类型是undefined还是object。

React.children有5个方法

• React.Children.map()
• React.Children.forEach()
• React.Children.count()
• React.Children.only()
• React.Children.toArray()

通常与React.cloneElement()结合使用来操作this.props.children。

React.Children.map()

React.Children.map()有些类似Array.prototype.map()。如果children是数组则此方法返回一个数组，如果是null或undefined则返回null或undefined。
第一参数是children。第二个参数是fucntion，function的参数第一个是遍历的每一项，第二个是对应的索引。

Object React.Children.map(object children,function fn [, object context])

使用方法

React.Children.map(this.props.children,function(child){

    return <p>{child}</p>

})

例子

function Father({children}) {
	const childrenContent = React.Children.map(children, (child, index) => {
      return <p>{child}-{index}</p>;
    });
    return(
      <div>
      {childrenContent}
      </div>    
    )        
 }


<Father>
    <p>11111</p>
</Father>

React.Children.forEach()

跟React.Children.map()一样，区别在于无返回。

React.Children.forEach(object children,function fn [, object context])

React.Children.count()

React.Children.count()用来计数，返回child个数。
不能用 children.length 来计数，当children是字符串时，children.length 就是字符串的长度了

Number React.Children.count(object children)

function Father({children}) {
	const childrenContent = React.Children.map(children, child => React.cloneElement(child));

	console.log(React.Children.count(children)); // 1

    return(
      <div>
      {childrenContent}
      </div>    
    )        
 }


<Father>
  <p>hello world!</p>
</Father>

React.Children.only()

返回children中仅有的子级。否则抛出异常。
这里仅有的子级是指，only方法接受的参数只能是一个对象，不能是多个对象（数组）。

Object React.Children.only(object children)

React.Children.toArray()

将children转换成Array，对children排序时需要使用

Array React.Children.toArray(object children)

function Father({children}) {
    let childrenContent = React.Children.toArray(children);
    return(
      <div>
      {childrenContent.sort().join(' ')}
      </div>    
    )        
 }


<Father>
    {'ccc'}
    {'aaa'}
    {'bbb'}
</Father>//渲染结果： aaa bbb ccc