首页 > 其他分享 >插槽

插槽

时间:2022-10-06 23:46:31浏览次数:42  
标签:slot IProps name ReactElement chi 插槽 children

function App() {
  const name = 'Comp Name'
  return (
    <Comp name={name}>
      <div slot="s1">solt1</div>
      <div slot="s2">solt2</div>
    </Comp>
  )
}

import { ReactElement } from 'react'

// 插入多个children就是数组,否则就是ReactElement对象
interface IProps {
  name: string
  children?: ReactElement[]
}
function Comp({ name, children }: IProps) {
  return (
    <>
      <h2>{name}</h2>
      { children.filter(chi => chi.props.slot === 's2') }
      { children.filter(chi => chi.props.slot === 's1') }
    </>
  )
}

标签:slot,IProps,name,ReactElement,chi,插槽,children
From: https://www.cnblogs.com/Lilc20201212/p/16758845.html

相关文章

  • Vue2 插槽
    Vue插槽概述插槽就是组件内的一个预留区域,它允许使用者向组件内的预留区域来添加自己想要的内容。比如我们已经写好了一个组件,然后以后可能会在指定区域插入广告,这时就......
  • antd插槽的使用 teble sole
    其实现在了解的也不是特别的清楚插槽模板在上面这里只写了其中一个<templateslot="warningLevel"slot-scope="warningLevel"><span:class="setFontColor(......
  • Vue 组件插槽
    默认插槽的定义与使用<!--组件test定义--><template><button><slot>提交</slot></button></template><!--父组件调用--><template>......
  • vue3 基础-具名插槽 & 作用域插槽
    上篇对slot的基本概念和使用有一个初步的认识,即通过slot的这种设计,父组件可以在调用子组件的时候,给组件之间传递一波dom,子组件通过slot标签来进行接收.sl......
  • 小程序 : 具名插槽
    组件:   使用:  ......
  • Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)
    插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html会牵涉到template的用法、占位、实际不渲染到页面中1、默认插槽:1.1基本结构及介绍个人理解:在A......
  • vue——插槽的作用与理解
    1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件2.分类:默认插槽、具名插槽、作用域插槽3.使用方式:默认插槽:子组件:......
  • Vue3插槽
    一、前言插槽其实就是子组件提供给父组件的占位符。子组件定义好插槽后,父组件可以替换插槽内容。子组件不提供插槽时,父组件填充失效父组件无填充时,会使用插槽默认内容......
  • slot插槽
    插槽,也就是槽,是组件的一块HTML模板,这块模板显示不显示,以及怎样显示由父组件来决定。插槽分为:匿名插槽|具名插槽|作用域插槽1、匿名插槽它不用设置名称属性,可以放置在......
  • Vue3中插槽(slot)用法汇总
    Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。什么是插槽简单来说就是......