在vue中当我们封装组件的时候，经常会用到slot插槽功能用来扩展自己组件使其拥有更多场景的适用，但是在react中是没有插槽这个概念的也没有可以直接使用的slot属性的，下面看下在react中是怎么实现类似插槽功能的。
1、props.children
react中在组件上传递的参数，都会被子组件中的props属性接收并使用，props除了接收传递参数的这些属性外还有一个隐藏属性children，当使用的组件中间放入东西的时候就会自动的被props中children属性接收,这时我们就可以根据jsx语法的渲染特点来使用children实现插槽功能。代码如下：
import React from 'react'
export default function Partent() {
return (
<div>
{/* 在组件中传入想扩展的内容 */}
<Slot>
<div>我被在使用的组件中展示了</div>
</Slot>
</div>
)
}
function Slot(props) {
// 接收children属性
const { children } = props
console.log(props, 'props---')
return (
<div>
<p>我是slot组件</p>
{/* 使用 children属性进行占位，如果有内容就渲染传入的内容*/}
{children}
</div>
)
}
上述代码中在Slot组件标签中间写入渲染内容，在Slot组件内部使用props.children 进行接收，根据jsx语法渲染规则在预先占位的地方直接进行渲染出填充的内容。效果如下：
此时props.children接受的值打印如下：
2、props.render
props.render是一种通过props进行传参的模式，并不是非要吧参数写为render，它可以是自己定义的任何字段名。下面我们来看下使用props.render模式来实现指定插槽：
import React from 'react'
export default function Partent() {
return (
<div>
{/* 在组件中传入自定义展示的内容 */}
<Slot top={<p>我是展示在top的内容</p>} bottom={<p>我是展示在bottom的内容</p>}>
<div>我被在使用的组件中展示了</div>
</Slot>
</div>
)
}
function Slot(props) {
// 接收children属性
const { children, top, bottom } = props
console.log(props, 'props---')
return (
<div>
{/* 渲染自定义的组件 */}
{top}
{top && <hr />}
<p>我是slot组件</p>
{children}
<hr />
{bottom}
</div>
)
}
上述代码中自己定义字段 top和bottom接收需要渲染的内容，在slot组件中将接收的内容渲染在指定位置，如果某些场景下不需要top中的内容，那么直接在父组件中不传递top参数即可。实现效果如下：
最后：props.render模式不光可以传递组件或者文字内容，它也可以传递函数等类型的参数来实现上述功能详细文档地址：点击传送
