react具名插槽和匿名插槽(简单易懂)

匿名插槽

先看代码：它可以通过props里children属性在接收组件标签内的值

import React from 'react'

 function Button(props) {
    const {children}=props
  return (
    <div>
        
        <button>{children}</button>
    </div>
  )
}

export default function Mine(){
        return (
            <>
            <Button> 我试按钮12</Button>
            </>
        )
            
        
}

具名插槽

把需要插入的内容写成一个函数返回，给需要使用的组件把插槽方法传入，调用即可

import React from 'react'

export default function Rsote() {
    function slotOne(){
        return <div>我试插槽</div>
    }
    function slotsTwo(){
        return <div>我试插槽</div>
    }
    return (
        <div>
            Rsote
                <One slotsTwo={slotOne} slotOne={slotsTwo}>
                </One>
        </div>

    )
}
const One = (props) => {
    console.log(props,'props1')
    const {slotOne,slotsTwo}=props
    return (
        <>
                {slotOne()}
                {slotsTwo()}
        </>
    )
}