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

这里我没有写单插槽定义

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

你可能感兴趣的:(react.js,javascript,前端,前端框架)