react 插槽

昌周

已于 2024-02-14 09:11:17 修改

阅读量699

点赞数 7

文章标签： react.js javascript 前端前端框架

于 2024-02-14 09:10:53 首次发布

本文链接：https://blog.csdn.net/qq_45623378/article/details/136111285

版权

本文介绍了在React开发中如何通过复用父组件来解决相似但有细微差异的组件问题，特别强调了使用slot机制来动态传递和处理不同插槽的内容。同时提及了Vue中的slot习惯和处理多个插槽时需要注意的问题。

摘要由CSDN通过智能技术生成

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

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

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

这里我没有写单插槽定义

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