React实现与Vue插槽的方法

最新推荐文章于 2024-07-27 01:00:00 发布

Lookeke

最新推荐文章于 2024-07-27 01:00:00 发布

阅读量223

点赞数

分类专栏： React 文章标签： vue.js react.js javascript

本文链接：https://blog.csdn.net/weixin_44152622/article/details/127295295

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用React 函数组件自带的 children 属性

React 函数组件带有三个属性:

type
props
children

而children可以为ReactNode, 也就是可以写JSX,此特性可以实现与Vue中的插槽类似功能

示例

export default function SimpleBadge ({ children }: { children?: ReactNode }) {

  return (
    <IconButton aria-label="cart">
      {/* badgeContent={ 4 } */ }
      <StyledBadge color="secondary">
        {
          children !== 0 && (
            children
          )
        }
      </StyledBadge>
    </IconButton>
  )
}