一,前言

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐