react第十单元(children的深入用法-React.Children对象上的方法)
2024-08-25 08:21:26
第十单元(children的深入用法-React.Children对象上的方法)
#课程目标
- 理解什么是children
- 掌握React.Children对象上的方法
#知识点
- 什么是children
上图中我们看到了,我们之前学过的React.createElement方法,现在大家发现jsx的内容,全部都体现在了该方法上;那么React.createElement其实是有三个参数的,第三个参数被称之为children,也就是子元素;看下图: 这个时候,第三个参数也体现出来了; 那么我们可以发现children其实也是外部传递的数据,只不过传递的是react元素。那么我们在组件的内部应该用this.props.children去接收这些元素; 在组件的内部:
console.log(this.props.children) => [<span>哈哈哈</span>]
1
- React.Children对象上的方法
我们已经知道在组件的内部如何获取到children了,那么针对children的处理,我们需要特别的注意,因为来自外界的children可以能是0个,也可能是1个,也可能是很多个;我们处理起来是比较麻烦的,但是React给我们提供了一些可以来处理children的方法;这些方法都挂在了React.Children
这个对象上:
map 方法
React.Children.map
1
该方法用来遍历children,使用方法如下:
React.Children.map(this.props.children,(item,key)=>{ //… });
1
该方法会把children看做一个数组,进行遍历,item表示数组中的每个元素,key表示每个元素对应的索引;每个回调函数的返回值会被组合成为一个数组变成map方法的返回值;
forEach 方法
React.Children.forEach
1
该方法也是来遍历children的,用法如下:
React.Children.forEach (this.props.children,(item,key)=>{ //… });
1
该方法类似于map,但是没有返回值
count 方法
该方法用来返回children中所包含组件的数量,用法如下:
React.Children.count(this.props.children)
1
only
该方法用来返回组件唯一的children,如果children不唯一将不允许调用该方法;
#授课思路
#案例和作业
基于swiper封装一个轮播组件,要有父组件和每一个滑块组件
封装弹窗组件 组件内容可以自定义
最新文章
- Ubuntu下Android Studio环境搭建
- Web报表页面如何传递中文参数
- bug-android之ActivityNotFoundException
- ubunu下用命令设置壁纸
- (转)Mac OS X内核编程,MAC驱动开发资源汇总
- kickstartInstalls
- magento后台登陆后,没任何提示,又跳转到登陆页面
- arcgis 瓦片图加载规则(转载)
- VR全景智慧城市搭建掀起实体市场潮流
- Android音频: 怎样使用AudioTrack播放一个WAV格式文件?
- MySQL暴错注入方法
- MongoDB及Mongoose的记录
- 约瑟夫环简介,问题以及java实现
- Navicat Premium 12安装与激活
- sqlalchemy 学习--单表操作
- system函数的应用一例
- 记一次ajax交互问题
- android手机 ping 虚拟机ubuntu的ip地址
- 01.css选择器-->;类选择器
- cocos2d怎么设置屏幕朝向?横屏 or 竖屏设置
热门文章
- docker下启动单机nacos
- 为什么企业需要CRM系统?CRM的作用及其重要性分析
- 跨域共享CORS详解及Gin配置跨域
- spring bean注册和实例化
- Mellanox 4036配置
- 痞子衡嵌入式:一个奇怪的Keil MDK下变量链接强制对齐报错问题(--legacyalign)
- moviepy音视频开发:audio_normalize调整剪辑音量大小到正常
- moviepy音视频剪辑:headblur的参数r_blur卷积核以及fx、fy、r_zone的功能作用及用途
- 第11.14节 正则表达式转义符和Python转义符相同引发问题的解决办法
- centos7最小安装后——网络配置、常见命令安装,远程连接、yum源安装软件包