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>

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

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

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试