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

相关推荐
RaidenLiu3 分钟前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost3 分钟前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost5 分钟前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost12 分钟前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪13 分钟前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
该用户已不存在20 分钟前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方22 分钟前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
小猫由里香27 分钟前
小程序打开文件(文件流、地址链接)封装
前端
Tzarevich31 分钟前
使用n8n工作流自动化生成每日科技新闻速览:告别信息过载,拥抱智能阅读
前端
掘金一周41 分钟前
一个前端工程师的年度作品:从零开发媲美商业级应用的后台管理系统 | 掘金一周 10.23
前端·人工智能·后端