React的插槽理解

插槽就是组件中写入内容，这些内容可以被识别和控制。React需要自己开发支持插槽功能，并不像vue那样有自带插槽标签

下面通过一个案例来具体演示吧

class ParentCom extends React.Component{
  
  render(){
    console.log(this.props)
    return(
      

        
组件插槽
        {this.props.children}
        
          
这是放置到头部的内容
          
这是放置到主要的内容
          
这是放置到尾部的内容
        
      
    )
  }
}

class Root extends React.Component{
  constructor(props){
    super(props)
    this.state={
      arr:[1,2,3]
    }
  }
  render(){
    return (
      
      
子组件1
      
子组件2
      
子组件3
    
    )
  }
}

class ChildCom extends React.Component{
 render(){
   let headerCom,mainCom,footerCom;
   this.props.children.forEach((item,index)=>{
   if(item.props['data-position'] === 'header'){
    headerCom=item
   }else if(item.props['data-position'] === 'main'){
     mainCom =item
   }else{
     footerCom =item
   }
   })
   return(
     

     

      {headerCom}
     
     

       {mainCom}
     
     

       {footerCom}
     
     
   )
 }
}

ReactDOM.render(
  ,
  document.querySelector("#root")
)