React组合（插槽）

一，前言

1.插槽用于组件的分发，在react中实现起来比较简单，主要有 使用props传递一个组件和 props.children 两种方式。

二，具名插槽

1.使用具体名字的props 传递一个 react元素，实现组件分发

function Demo(props){
	return <div>{props.content}</div>
}
<Demo content={<span>demo</span>}>

三，props.children

1.使用props.children可任意分发组件内容

2.props.children的值有四种可能情况

(1) 当无内容时，为undefined
(2) 当只有一个组件时为object,即组件实例
(3) 当有多个组件时，返回数组array，即存放每个组件实例的数组。
(4）当传入不是 react元素为字符串

function Demo(props){
	return <div>{props.children}</div>
}

<Demo><span>demo</span></Demo>

3.react专门为props.children设立处理的方法

（1）React.Children.map(childrenArr, fn): 为多组件数组每个组件实例执行一次fn函数，可返回

（2）React.Children.forEach(childrenArr,fn): 为多组件数组每个组件实例执行一次fn函数，无返回

（3）React.Children.count(childrenArr,fn): 返回组件实例个数

（4）React.Children.only(childrenArr):返回唯一的子组件