匿名插槽
先看代码:它可以通过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()}
</>
)
}