React中的函数式插槽,你明白了吗?
创始人
2025-07-05 17:01:44
0

朋友们,好久不见,最近搬家,通勤时间从1小时变成三小时,花了一两个月终于适应了,所以有空我又来更新文章了,今天分享 React 开发中遇到的具名插槽的函数用法

你可能见过下面的写法。通常情况下,我们都会使用 children 属性实现类似Vue的默认插槽功能。

const Component = ({ value, children }) => {
  return <>
      {value} 
      {children}
  
}
 
function App() {
  return world
}

上面使用了隐藏的 children 属性,我们可以显示的指定它

function App() {
  return 
}

children 属性默认是 jsx 表达式,不是时,需要做额外的解析,否则会报错

但是当 children 属性是函数时,就会发生质的变化。

const Component = ({value, children}) => {
  return <>{children(value)}
}

const renderChildren = (value) => {
  return value.join('--')
}

function App() {
  return (
    
  )
}

图片图片

显示的指定 children 属性时,相当于具名插槽,所以我们未必需要使用 children 字段,或许你可以使用reader更合适

如果你不喜欢显示的声明 children 属性,那么可以这么写:

function App() {
  return (
    
      {(value) => {
          return value.join('--')
      }}
    
  )
}

这种写法似乎有点熟悉,没错,React 官方也这么干过,你来看看这个例子。

const Context = createContext({name: '萌萌哒草头将军'});

export const Provider = Context.Provider;
export const Consumer = Context.Consumer;

// 你的组件,假设已经被 Provider 包裹了
function Component() {
  return (
    {
      ({ name }) => 

name: { name }

}
); }

相似的还有一些第三方库,比如 antd 的 。这里就不一一举例子了。

虽然这种写法看起来很奇怪,但是可以极大地提高组件的灵活性。或者说,这是一种超级加强的插槽写法。因为,我们可以在组件外自定义渲染逻辑。

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...