在react上实现vue的插槽slot

Posted 2023-04-13

参考技术A 假设我们定义一个react组件，想要在react组件中像vue那样传入插槽内容。因为，react中一切都是js，插槽可以通过props传递进来并渲染。那么，可以使用组件的props来传递：
function child(props)
return <div>poops.slotA</div>

使用组件的时候:
import child from 'path/to/child'

function slotDom = function()return <span>我是插槽部分</span>

function father()
return (<div>
<child slotA=<slotDom />>
</div>)


像上面这种方式，就实现了vue的slot插槽。

vue 插槽slot向父组件传值

参考技术A 子组件，里面有slot插槽，并在slot上绑定了text值

父组件通过slot-scope就可以拿到子组件slot上绑定的值，并且2.5.0版本可以用于任意元素上

这样，就可以拿到子组件里面的text值。