react中的slot插槽功能

在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模式不光可以传递组件或者文字内容，它也可以传递函数等类型的参数来实现上述功能详细文档地址：点击传送