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对象处理分类时别搞错就行

相关推荐
快乐的哈士奇1 分钟前
【Next.js实战②】Excel 派送表动态解析:表头识别与 FIELD_ALIASES 映射
前端·javascript·excel
2401_840759768 分钟前
2026年前端框架生态与AI开发新趋势
前端·人工智能·科技
研☆香32 分钟前
jQuery特殊属性操作方法
前端·javascript·jquery
ShiJiuD66688899936 分钟前
外卖项目总结下 (前端板块)
前端
liming4951 小时前
Maven中央库迁移
服务器·前端·maven
oioihoii1 小时前
探索React与Microi吾码的完美结合:快速搭建项目,低代码便捷开发教程
react.js·低代码·rxjava
超哥--8 小时前
B站视频内容智能分析系统(九):React 前端与管理面板
前端·react.js·前端框架
Cutecat_10 小时前
视频字幕处理工具横向:提取模式 vs 编辑模式,该如何选择
android·前端·ios·语音识别
qq_4221525711 小时前
PDF 加水印工具怎么选?2026 年文档版权保护方案对比
前端·pdf·github
kyriewen11 小时前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试