react 插槽

卑微的雨落2024-02-15 9:36

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

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

html 复制代码

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 拿到想要的数据进行处理

这里我没有写单插槽定义

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