react中插槽的实现方案

//1.第一种实现方案 具名插槽
//子组件
const ChildCom = memo((props)=>{
	const {left,center,right} = props
	return (
		<div>
			<div classname="left">{left}</div>
			<div classname="center">{center}</div>
			<div classname="right">{right}</div>
		</div>
	)
})

//父组件
const ParentCom = memo(()=>{
	return (
		<ChildCom left={<span>Left</span>} 
			 center={<span>Center</span>} 
			 right={<span>Right</span>}>
		</ChildCom >
	)
})

//2.任意插槽
//子组件
const ChildCom = memo((props)=>{
	return(
	<div>
		{props.children}
	</div>
)
	
})

//父组件
const ChildCom = memo(()=>{
	return(
	<div>
		
		<ChildCom>
			<span>我是插槽内容</span>
			// 如果插入多个span,则子组件props.children是个数组
			//<span>我是更多span</span>
		</ChildCom>
	</div>
)
	
})