React组合（插槽）

一，“具名插槽”

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):返回唯一的子组件

四，总结

1.react插槽实现使用props传递一个组件

2.或者使用props.children分发组件到不同的位置

扫描二维码关注公众号，回复： 12909711 查看本文章