1. react element作为child
<Menu>
<Item>menu one</Item>
<Item>menu two</Item>
</Menu>
const Item = (props) => <li>{props.children}</li>
class Menu extends Component {
render () {
return (
<ul>{this.props.children}</ul>
)
}
}
children基本用法
2. 函数作为child
<Container>
{(text) => <div>{text}</div>}
</Container>
class Container extends Component {
render () {
return (
<div>
{this.props.children('hello world')}
</div>
)
}
}
通过函数的方式子组件<div>..</div>就能接收父组件（Container）传给他的值，相对于直接使用<Container><div>hello world</div></Container>这样更加灵活。
childrenk可以是任意的数据结构可以是array, function, object, text, dom, react component等。
3. React.children.map
遍历props.children可以获取子组件实例，然后clone子组件进行操作，可以添加修改子组件的props如：
React.Children.map(this.props.children, (child) => {
return React.cloneElement(child, {
className: 'xxx',
});
})
React.Children.map(this.props.children, (child, index) => {
if(child.props.active) {
return child;
}
})
注意： 使用this.props.children.map进行遍历如果children是函数/单个react元素/对象等将会抛出错误，但是使用React.Children.map就不会
4. React.Children.forEach
使用方式和 React.children.map类似就是没有返回值。
5. React.Children.count
用于统计子元素的个数,使用方式React.Children.count(this.props.children)
<ChildrenCounter>
{() => <h1>First</h1>}
Second!
<p>Third!</p>
</ChildrenCounter>
// 返回2
注意：使用 this.props.children.length 等于 map / froreach方法中遍历次数， 函数作为child是不会遍历的
6. React.Children.toArray
如果children只包含一个函数，React.Children.toArray将返回一个空数组[ ]
React.Children.toArray(this.props.children)
使用该方法后，就可以调用数组的任意方法了，如sort,splic等对children进行操作
7. React.Children.only
验证this.props.children只包含一个React element, 所以只有当this.props.children是个React element而不是数组/单个字符串/单个函数才能返回正确的值。
