react08-插槽

react08 - 插槽

函数组件 - 插槽

解决在react18中的componentDidmonunt 执行两次的方法 : 将root.render() 中的 <React.StrictMode></ React.StrictMode> 的标签关闭

双闭合标签调用组件时,可以传递子节点,当只传递一个节点时,在组件中通过props结构出来的是一个节点对象,当有多个节点时获得的是一个数组,每个子节点就是一个数组的对象元素 :

当没有子节点时,打印的将是undefined,因为props中没有该属性

获得children后,怎么使用呢?

插槽的机制

插槽应用

手动处理有些麻烦,可以引入 React库 使用react对象中的Children方法 :

count : 子节点个数; foreach、map: 数组遍历; toArray : 转换成数组,无论什么结构的children值

具名插槽

很简单,就给插槽中的子节点加个 slot属性名

具名插槽用来处理这种子节点排序随意而导致页面显示异常的情况

slot就是一个随意的属性名,可以随意起,属性值可以用来给子节点分类,将向同类放入同一个数组中,以便后续处理,slot属性名和其属性值都可以用来给节点分类,只需注意在遍历children对象处理分类时别搞错就行

相关推荐
IT_陈寒11 小时前
Redis大key删除为什么会导致服务卡顿?我的线上事故复盘
前端·人工智能·后端
用户27050777252412 小时前
MCP 最小 Server 实测:3 个 JSON-RPC 报错与修法
前端
用户4993350250712 小时前
一人VIP账号多人共用:Web 代理里的会话共享怎么实现
前端
用户老李12 小时前
无线电自学教程 05:第一台收音机——从矿石机到 SDR
前端
IPIPD12 小时前
Node.js请求遇到503怎么重试?先解析Retry-After,再做有上限退避
前端
葡萄城技术团队12 小时前
dsh-spreadjs-editor 的集成链路:把 SpreadJS Designer 嵌进 Agent 工作台
前端
FlyWIHTSKY13 小时前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
码云之上13 小时前
10 颗一模一样的「Edit」:中后台 Web Agent 怎么找到对的那一行
前端·人工智能·浏览器
量化分析码农14 小时前
【Python量化多因子实战 04】因子暴露不是 alpha:市值与行业中性化实战
前端·后端
不可能片场14 小时前
Electron 发布 正文写入的三条通道与读回口径
前端·electron