React中插槽处理机制

React中插槽处理机制

需求：假如底部可能有按钮，根据需求判断需要展示或不展示，或者需要展示不同的按钮或者其他DOM
解决1：需要的按钮可以在组件中写死，后期基于传递进来的属性来进行判断
解决2：我们也可以把按钮的区域预留出来，但是内容不写，内容让调用的组件的时候，把东西传递进来【传递的是结构】

<DemoOne>
   <div>1div>
   <div>2div>
DemoOne>
1
2
3
4

组件中的两个div基于props.children获取传递的子节点信息
这一套机制就是插槽机制
调用组件的时候，基于上闭合调用方式把插槽信息【子节点信息】，传递给组件，组件内部渲染即可

例子1（匿名插槽）：
传进来的子节点若只有一个展示在组件头部，若两个则第一个节点在组件头部，第二个节点在组件底部

//父组件
 <div>
            <h1>没有childrenh1>
            <DemoOne/>
            <h1>一个节点h1>
            <DemoOne>
                <div>1div>
            DemoOne>
            <h1>两个节点h1>
            <DemoOne>
                <div>1div>
                <div>2div>
            DemoOne>
div>
//子组件
const DemoOne=(props)=>{
    let {x,children}=props
    //使用React中的方法将children转换为数组
    children=React.Children.toArray(children)
    return(
        <div>
            {children[0]}
            <div>DomeOnediv>
            {children[1]}
        div>
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

运行结果：

缺点：匿名插槽，两个节点的顺序不能改变，必须按照指定顺序

例子2（具名插槽）：

//子组件
const DemoOne=(props)=>{
    let {x,children}=props
    //使用React中的方法将children转换为数组
    children=React.Children.toArray(children)
    let headerSlot=[],
        footerSlot=[],
        defaultSlot=[]
    children.forEach(child=>{
        let {slot}=child.props
        console.log(slot,child)
        if(slot==='header'){
            headerSlot.push(child)
        }else if(slot==='footer'){
            footerSlot.push(child)
        }else {
            defaultSlot.push(child)
        }
    })
    return(
        <div>
            {headerSlot}
            <div>DomeOne</div>
            {defaultSlot}
            {footerSlot}
        </div>
    )
}

//父组件中调用
<DemoOne>
     <div slot='footer'>我在底部</div>
      <div slot='header'>我在头部</div>
      <div>我是默认</div>
</DemoOne>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

具名插槽把筛选出的插槽信息放在指定位置进行渲染
目的：在调用组件的，传递信息的时候，可以不用