react函数组件，插槽、具名插槽、父传子传组件

react函数组件，插槽、具名插槽、父传子传组件

 

###### 插槽 

需要在函数组件这里接收一个props

const App=(props)=>{

//解构出来

const {children }=props
return <div>

//  children  是一个数组，里面是虚拟dom,直接这样渲染就ok

​      {children} 

</div>

}
export default App

<Home>

​	<div>在这里写内容就传过去啦</div>

</Home>

###### 具名插槽

const App=(props)=>{

//解构出来

const {children }=props
return <div>

​      {children.def} //这是def插槽内容显示的位置

 	  {children.ref} //这是ref插槽显示内容的地方

}
export default App

<Home>

​	{{
​               def:(
​                 	 <>

​                    	 <div>这是def插槽要显示的东西</div>

​                  	</>
​               ),



​               ref:(
​                	<>

​						 <div>这是ref插槽要显示的东西</div>

​                	</>
​               )
​            }}

</Home>

###### 父传子传组件

​	需要在函数组件这里接收一个props

const App=(props)=>{

//解构出来

const {solt}=props
return <div>

//接收组件的时候，solt是一个函数，直接在需要的地方调用 

{solt( )}

</div>

}
export default App

<Home solt={‘组件’}></Home>