React中插槽处理机制

React中插槽处理机制

需求:假如底部可能有按钮,根据需求判断需要展示或不展示,或者需要展示不同的按钮或者其他DOM

解决1:需要的按钮可以在组件中写死,后期基于传递进来的属性来进行判断

解决2:我们也可以把按钮的区域预留出来,但是内容不写,内容让调用的组件的时候,把东西传递进来【传递的是结构】

html 复制代码
<DemoOne>
   <div>1</div>
   <div>2</div>
</DemoOne>

组件中的两个div基于props.children获取传递的子节点信息

这一套机制就是插槽机制

调用组件的时候,基于上闭合调用方式把插槽信息【子节点信息】,传递给组件,组件内部渲染即可

例子1(匿名插槽):

传进来的子节点若只有一个展示在组件头部,若两个则第一个节点在组件头部,第二个节点在组件底部

html 复制代码
//父组件
 <div>
            <h1>没有children</h1>
            <DemoOne/>
            <h1>一个节点</h1>
            <DemoOne>
                <div>1</div>
            </DemoOne>
            <h1>两个节点</h1>
            <DemoOne>
                <div>1</div>
                <div>2</div>
            </DemoOne>
</div>
//子组件
const DemoOne=(props)=>{
    let {x,children}=props
    //使用React中的方法将children转换为数组
    children=React.Children.toArray(children)
    return(
        <div>
            {children[0]}
            <div>DomeOne</div>
            {children[1]}
        </div>
    )
}

运行结果:

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

例子2(具名插槽):

javascript 复制代码
//子组件
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>

具名插槽把筛选出的插槽信息放在指定位置进行渲染

目的:在调用组件的,传递信息的时候,可以不用

相关推荐
工一木子25 分钟前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈