react 插槽

 问题开发当中会经常出现组件十分相似的组件，只有一部分是不同的

 解决：  父组件:在引用的时候

import { Component } from "react";
import Me from "../me";

const name = 
名称
class  Shoop extends Component {
   

    render(){
         return 

                {name}
              
                 

                  
                 
                 

                 视频
                 
              
              
              

                 视频
                 
              
              
                 

              
         
    }
}
export default Shoop

子组件

 const Me = (props)=> {
   const newChildren =  {}
  
  if(props.children  && props.children.length > 1) {
    console.log(props.children,"props.childrenprops.childrenprops.children")
      props.children.map((Item) => {
      newChildren[Item.props.slot] = {}
      newChildren[Item.props.slot]["children"] =   Item.props.children
      
    })
  }
  return (

           
名称
           
 图片自定义区域  {newChildren?.img  ? newChildren?.img?.children : ""} 
           
 {newChildren?.voide  ? newChildren?.voide?.children : ""}
           
  
)
}
export default Me

 父组件设置 solt 其实设置什么都可以，只是vue 通常以solt 为定义出于习惯

当父组件设置过数据以后，自组件可以通过props.childen 拿到想要的数据进行处理

这里我没有写单插槽定义

如果写多个插槽的时候要考虑单个的问题，因为单个插槽传递过来是对象形式的