react 插槽

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

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

import { Component } from "react";
import Me from "../me";const name = <div>名称</div>
class  Shoop extends Component {render(){return <div style={{display: "flex"}}>{name}<Me><div slot="img"><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.GwJCNqHxfwmnsMUpKG6tmAHaHa?w=208&h=207&c=7&r=0&o=5&pid=1.7"></img></div><div slot="voide">视频</div></Me><Me><div slot="voide">视频</div></Me><Me><div></div></Me></div>}
}
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 (<div style={{height:"100px",width:"200px",background:"red"}}><div>名称</div><div> 图片自定义区域  {newChildren?.img  ? newChildren?.img?.children : ""} </div><div> {newChildren?.voide  ? newChildren?.voide?.children : ""}</div></div>)
}
export default Me

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

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

这里我没有写单插槽定义

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