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

相关推荐
你不会困几秒前
什么?每天早上准时9点给你发送github项目推荐邮件
前端·javascript·nestjs
前端炼气期一层11 分钟前
git之我add错了代码怎么办呀!我commit错了怎么办呀!
前端·面试
curdcv_po14 分钟前
新手到老鸟😎🚀玩转 React Effect
前端·react.js
eason_fan20 分钟前
字节前端面试提问:微应用的实现方式有哪些?
前端·面试·前端框架
Surprisec33 分钟前
动手实践YJS:构建你的第一个实时协作文档编辑器
前端·javascript·面试
晴殇i34 分钟前
JavaScript新一代异步写法:不用await,性能提升80%
前端·面试
患得患失94935 分钟前
【前端】【React】useCallback的作用与使用场景总结
前端·javascript·react.js
Violet51536 分钟前
🎢从零打造React组件库!Rollup+TS+React19保姆级上车指南(一)🚀
react.js·前端框架
wordbaby37 分钟前
TanStack Query :现代 Web 应用的异步状态管理利器
前端
江沉晚呤时39 分钟前
深入解析策略模式在C#中的应用与实现
java·服务器·开发语言·前端·.netcore