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的权限系统围绕着两个概念: 认证->确定用户是否允许连接数据库服务器: 授权->确定用户是否拥有足够的权限执 ...
随机推荐
- 面经分享!蚂蚁金服三面被拒,重拾起鼓四面猿辅导成功拿下offer!
前言 一直有小伙伴要我分享面经,说自己想面互联网公司,无奈经验太少想多看看其他人是怎么面的.我这两天刚好和一个刚拿到猿辅导offer的朋友吃了个饭,他向我说了说自己的面试经历.粉丝朋友是末流211毕业 ...
- CorelDRAW软件的出血位详解
出血位,一种常见的印刷术语,在印刷品中,设计的图形一般比成品尺寸要大,会加一些延伸,专门用来给生产工艺中的公差范围使用,以避免最后裁切的成品中有白边或是裁到内容.多出来的部分在印刷后要被裁掉,这部分就 ...
- Spring中各个模块
Spring中个模块介绍 核心模块 提供了对Bean的配置.管理.创建等以及IOC/DI.如果只需要提供IOC/DI功能,只需要引入Beans和Core两个jar包 Core 包含Spring框架 ...
- GoLang 自学系列(二)—— defer
defer 关键字 首先来看官网的定义: A "defer" statement invokes a function whose execution is deferred to ...
- Spring Boot 中使用 Spring Security, OAuth2 跨域问题 (自己挖的坑)
使用 Spring Boot 开发 API 使用 Spring Security + OAuth2 + JWT 鉴权,已经在 Controller 配置允许跨域: @RestController @C ...
- Django之数据库--ORM
一.建立数据库模型类 1.在model里创建模型类.(继承models.Model) from django.db import models # Create your models here. c ...
- centos7中安装redis出现的问题
重现步骤: 1.解压redis包后 执行make命令.出现一堆东西,其中有gcc:命令未找到. 解决:安装 yum install gcc-c++(需要有网) 2.安装完gcc命令后,再make.出现 ...
- nodejs事件和事件循环简介
目录 简介 事件 事件循环 事件循环的阻塞 事件循环举例 栈和消息队列 作业队列和promise process.nextTick() setImmediate() setInterval() 简介 ...
- Python中判断字符串是否为数字的三个方法isdecimal 、isdigit、isnumeric的差别
isdecimal .isdigit.isnumeric这三个字符串方法都用于判断字符串是否为数字,为什么用三个方法呢?他们的差别是什么内? isdecimal:是否为十进制数字符,包括Unicode ...
- 第10.11节 Python模块和包小结
Python的模块就是一个独立的Python文件,Python的包是一些功能相关的Python文件放到一个目录下进行统一管理的文件管理结构,包本质上是模块,加载包就是加载包下特定的模块文件__init ...