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的权限系统围绕着两个概念: 认证->确定用户是否允许连接数据库服务器: 授权->确定用户是否拥有足够的权限执 ...
随机推荐
- 小程序ui自动化(一),用uiAutormatorViewer定位元素失败,如何解决
1.定位元素 用android ADT自带工具:uiAutormatorViewer,会报如下错误 可能是环境与手机不兼容 可以用以下方法解决:(参考:https://blog.csdn.net/qq ...
- 安装curl,composer
wget https://curl.haxx.se/download/curl-7.54.1.tar.gz tar -zvxf curl-7.54.1.tar.gz cd curl-7.54.1 ./ ...
- 宝塔Linux面板安装
宝塔linux6.0版本是基于centos7开发的,务必使用centos7.x 系统 提示:Centos官方已宣布在2020年停止对Centos6的维护更新,各大软件开发商也逐渐停止对Centos6的 ...
- 【linux】系统调用版串口分析&源码实战
目录 前言 参考 1. 实战分析 1.1 开发步骤 1.1.1 获取串口设备路径 1.1.2 打开设备文件 1.1.3 配置串口 termios 结构体 1. c_iflag 输入模式标志 2. c_ ...
- Java基础教程——File类、Paths类、Files类
File类 File类在java.io包中.io代表input和output,输入和输出. 代表与平台无关的文件和目录. 可以新建.删除.重命名,但不能访问文件内容. File类里的常量: impor ...
- Java基础教程——Date类和Calendar类
Date类和Calendar类都是关于日期的类,都在java.util包中,使用时需要import. Date java.util.Date类的对象用来表示时间和日期,用得最多的是获取系统当前日期和时 ...
- 锐安信sslTrus与GeoTrust SSL证书的对比
当您想要为您的网站购买一款SSL证书时,是不是既想要价格便宜,又想要安全性能服务好的证书,最后又在品牌上犹豫不决?如何选择SSL证书?哪款SSL证书是最适合您的?本文将详细对比分析锐成信息平台上畅销品 ...
- MFC二进制文件读取
1.mfc Document-vew doc类中读取 doc类中读取,在Vew类中可直接使用. 在菜单栏NewFile/OpenFile 后,系统自动调用Serialize()函数 if :写入文件 ...
- 「刷题笔记」哈希,kmp,trie
Bovine Genomics 暴力 str hash+dp 设\(dp[i][j]\)为前\(i\)组匹配到第\(j\)位的方案数,则转移方程 \[dp[i][j+l]+=dp[i-1][j] \] ...
- day6(短信验证接口)
1.注册容联云账号 1.1注册账号 https://www.yuntongxun.com/user/login 1.2登录即可看到开发者账号信息 1.3 添加测试账号 2.使用容联云发送代码测试 ' ...