在 react 中实现插槽功能

原理

react的prop可以是任何需要的东西，比如：某个值、react dom等。

默认插槽

实现默认插槽

创建组件 defaultSlot.jsx

class index extends Component {
    render() {
        return (
            <div>
	            <p>默认插槽</p>
	            {this.children}    {/*预留的默认插槽*/}
	          </div>
        )
    }
}

使用默认插槽

import A from "@/components/defaultSlot"
export default class extends Component {

render() {
  return (
     <A>
     <p>1<p>
     </A>
   )
  }
}

具名插槽

实现具名插槽

创建组件 nameSlot.jsx

class index extends Component {
  
  createSlot =(slotName)=>{
  let children=this.props.children
  if(typeof children ==='object' && !Array.isArray(children)) children=[children]
  if(children)
  for(let el of children){
    if(el.props.slot===slotName) return el
  } 
   return null
  }


   render() {
    // console.log(this.props.children)
     return (
      <div>
        <p>具名插槽</p>
        {this.createSlot('a')}    {/*预留的插槽a*/}
        {this.createSlot('b')}    {/*预留的插槽b*/}
        {this.createSlot('c')}    {/*预留的插槽c*/}
      </div>
    )
  }
}

使用具名插槽

import A from "@/components/nameSlot"

export default class extends Component{

render(){
	 return(
	    <div>
		    <A>
			    <p slot='a'>1</p>
			    <p slot='b'>2</p>
			    <p slot='c'>3</p>
		    </A>
	    </div>
	   )
   }
}

结尾

总的来说 react的扩展性还是很强大的。虽然官网没有提供某些功能的api，但是我们可以用自己的方法来对其进行扩展，如果有小伙伴有疑惑或者建议，欢迎提出和分享。最后感谢大家的观看，希望能给你们带来帮助。