React组合(插槽)
一,“具名插槽”1.使用具体名字的props 传递一个 react元素,实现组件分发function Demo(props){return <div>props.content</div>}<Demo content={<span>demo</span>}>二,props.children1.使用props.children可任意分发组件
·
一,前言
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)
:返回唯一的子组件
更多推荐
已为社区贡献4条内容
所有评论(0)