react第十单元(children的深入用法-React.Children对象上的方法)
第十单元(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>]
- React.Children对象上的方法
我们已经知道在组件的内部如何获取到children了,那么针对children的处理,我们需要特别的注意,因为来自外界的children可以能是0个,也可能是1个,也可能是很多个;我们处理起来是比较麻烦的,但是React给我们提供了一些可以来处理children的方法;这些方法都挂在了React.Children
这个对象上:
map 方法
React.Children.map
该方法用来遍历children,使用方法如下:
React.Children.map(this.props.children,(item,key)=>{ //… });
该方法会把children看做一个数组,进行遍历,item表示数组中的每个元素,key表示每个元素对应的索引;每个回调函数的返回值会被组合成为一个数组变成map方法的返回值;
forEach 方法
React.Children.forEach
该方法也是来遍历children的,用法如下:
React.Children.forEach (this.props.children,(item,key)=>{ //… });
该方法类似于map,但是没有返回值
count 方法
该方法用来返回children中所包含组件的数量,用法如下:
React.Children.count(this.props.children)
only
该方法用来返回组件唯一的children,如果children不唯一将不允许调用该方法;
#授课思路
#案例和作业
基于swiper封装一个轮播组件,要有父组件和每一个滑块组件
封装弹窗组件 组件内容可以自定义
react第十单元(children的深入用法-React.Children对象上的方法)的更多相关文章
- react第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件)
第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件) #受控组件 简而言之,就是受到状态state控制的表单,表单的值改变则state值也改变,受控组件必须要搭配onc ...
- react第二十单元(react+react-router-dom+redux综合案例2)
第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业
- 【react】使用 create-react-app 构建基于TypeScript的React前端架构----上
写在前面 一直在探寻,那优雅的美:一直在探寻,那精湛的技巧:一直在探寻,那简单又直白,优雅而美丽的代码. ------ 但是在JavaScript的动态类型.有时尴尬的自动类型转换,以及 “0 == ...
- vue第二十单元(vux的配置中模块modules的用法)
第二十单元(vux的配置中模块modules的用法) #课程目标 1.什么是module? 2.怎么用module? 3.样板代码目录结构 #知识点 #1.modules 在Vue中State使用是单 ...
- vue第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定)
第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...
- linux基础-第十单元 系统的初始化和服务
第十单元 系统的初始化和服务 Linux系统引导的顺序 Linux系统引导的顺序 BOIS的初始化和引导加载程序 什么是BIOS GRUB程序和grub.conf文件 什么是grub grub配置文件 ...
- jQuery 中 children() 与 find() 用法的区别
1.children() 与 find() 用法的区别 通过children获取的是该元素的下级元素,而通过find获取的是该元素的下级所有元素.
- jQuery children等筛选用法
jQuery children等筛选用法: <%@ page language="java" import="java.util.*" pageEncod ...
- mysql进阶(二十八)MySQL GRANT REVOKE用法
mysql进阶(二十八)MySQL GRANT REVOKE用法 MySQL的权限系统围绕着两个概念: 认证->确定用户是否允许连接数据库服务器: 授权->确定用户是否拥有足够的权限执 ...
随机推荐
- 在IDM上设置防止过度抓取网站信息
在使用Internet Download Manager(IDM)下载器时,有时会发现IDM自带的抓取功能过于强大,以至于有时会抓取一些无效的链接.那么,该如何避免IDM的过度抓取呢? 图1:IDM的 ...
- 【MathType教学】如何让括号内的内容居中
作为一款非常好用的公式编辑器,MathType它的功能十分强大,不仅包含了大量的数学符号,并且能和Office软件很好地兼容.但是有的时候打出来的公式可能不是自己想要的效果,这时我们就要用一些特别的办 ...
- 刚安装好的MathType怎么使用
对于刚接触公式编辑器的新手来说,难免会存在很多疑问:如何使用刚安装好的Word公式编辑器?安装好公式编辑器之后,我们在哪里找到这个工具呢?下面就针对大家的这些疑问,来给大家介绍下首次使用MathTyp ...
- 网络系列之GET与POST请求方式的区别
作为一枚正在学习前端的 小萌新,如果下面哪里有写的不对的话,可以帮我指出来吗,谢谢 1.是基于什么前提的?如果什么前提都没有,不使用任何规范,只考虑语法和理论上的HTTP协议 那么GET和POST几乎 ...
- 开始使用 java8 的日期工具类
例如,现有的类(例如java.util.Date和SimpleDateFormatter)不是线程安全的,这会导致用户潜在的并发问题.而新的LocalDate.LocalDateTime.DateTi ...
- thinkphp3.2 添加自定义类似__ROOT__的变量
1 thinkphp3.2 添加自定义类似__ROOT__的变量 2 3 在config.php文件中 4 return array( 5 '' => '', 6 'TMPL_PARSE_STR ...
- appium快速入门
appium快速入门 演示官方demo 第一步:启动安卓模拟器 步骤2:启动Appium桌面 step3:准备自动化脚本与待测APK step4:运行测试代码 分析演示 分析Appium的加载流程 使 ...
- HDU4632 Palindrome subsequence
标签(空格分隔): 区间qp Palindrome subsequence \[求一个string的 回文子序列 的个数 \] 少废话,上代码. #include<bits/stdc++.h&g ...
- P1163 银行贷款
考虑从一个月转移到下一个月.假设前一个月的欠款是 \(s\),月利息为 \(d\),月末还款为 \(b\),那么下一个月的欠款就是 \(s\left(1+d\right)-b\). 很容易看出月利息越 ...
- Foreground-aware Image Inpainting
引言 语义分割得到边缘信息指导修复其三 存在问题:现在的图像修复方法主要的通过周围像素来修复,当修复区域与前景区域(显著物体)有交叠时,由于修复区域缺失前景与背景的时间内容导致修复结果不理想. 提出方 ...