第十单元(children的深入用法-React.Children对象上的方法)

#课程目标

  1. 理解什么是children
  2. 掌握React.Children对象上的方法

#知识点

  1. 什么是children

 上图中我们看到了,我们之前学过的React.createElement方法,现在大家发现jsx的内容,全部都体现在了该方法上;那么React.createElement其实是有三个参数的,第三个参数被称之为children,也就是子元素;看下图:  这个时候,第三个参数也体现出来了; 那么我们可以发现children其实也是外部传递的数据,只不过传递的是react元素。那么我们在组件的内部应该用this.props.children去接收这些元素; 在组件的内部:

console.log(this.props.children) => [<span>哈哈哈</span>]
1
  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封装一个轮播组件,要有父组件和每一个滑块组件

封装弹窗组件 组件内容可以自定义

react第十单元(children的深入用法-React.Children对象上的方法)的更多相关文章

  1. react第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件)

    第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件) #受控组件 简而言之,就是受到状态state控制的表单,表单的值改变则state值也改变,受控组件必须要搭配onc ...

  2. react第二十单元(react+react-router-dom+redux综合案例2)

    第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业

  3. 【react】使用 create-react-app 构建基于TypeScript的React前端架构----上

    写在前面 一直在探寻,那优雅的美:一直在探寻,那精湛的技巧:一直在探寻,那简单又直白,优雅而美丽的代码. ------ 但是在JavaScript的动态类型.有时尴尬的自动类型转换,以及 “0 == ...

  4. vue第二十单元(vux的配置中模块modules的用法)

    第二十单元(vux的配置中模块modules的用法) #课程目标 1.什么是module? 2.怎么用module? 3.样板代码目录结构 #知识点 #1.modules 在Vue中State使用是单 ...

  5. vue第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定)

    第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...

  6. linux基础-第十单元 系统的初始化和服务

    第十单元 系统的初始化和服务 Linux系统引导的顺序 Linux系统引导的顺序 BOIS的初始化和引导加载程序 什么是BIOS GRUB程序和grub.conf文件 什么是grub grub配置文件 ...

  7. jQuery 中 children() 与 find() 用法的区别

    1.children() 与 find() 用法的区别 通过children获取的是该元素的下级元素,而通过find获取的是该元素的下级所有元素.

  8. jQuery children等筛选用法

    jQuery children等筛选用法: <%@ page language="java" import="java.util.*" pageEncod ...

  9. mysql进阶(二十八)MySQL GRANT REVOKE用法

    mysql进阶(二十八)MySQL GRANT REVOKE用法   MySQL的权限系统围绕着两个概念: 认证->确定用户是否允许连接数据库服务器: 授权->确定用户是否拥有足够的权限执 ...

随机推荐

  1. 面经分享!蚂蚁金服三面被拒,重拾起鼓四面猿辅导成功拿下offer!

    前言 一直有小伙伴要我分享面经,说自己想面互联网公司,无奈经验太少想多看看其他人是怎么面的.我这两天刚好和一个刚拿到猿辅导offer的朋友吃了个饭,他向我说了说自己的面试经历.粉丝朋友是末流211毕业 ...

  2. CorelDRAW软件的出血位详解

    出血位,一种常见的印刷术语,在印刷品中,设计的图形一般比成品尺寸要大,会加一些延伸,专门用来给生产工艺中的公差范围使用,以避免最后裁切的成品中有白边或是裁到内容.多出来的部分在印刷后要被裁掉,这部分就 ...

  3. Spring中各个模块

    Spring中个模块介绍 核心模块 ​ 提供了对Bean的配置.管理.创建等以及IOC/DI.如果只需要提供IOC/DI功能,只需要引入Beans和Core两个jar包 Core 包含Spring框架 ...

  4. GoLang 自学系列(二)—— defer

    defer 关键字 首先来看官网的定义: A "defer" statement invokes a function whose execution is deferred to ...

  5. Spring Boot 中使用 Spring Security, OAuth2 跨域问题 (自己挖的坑)

    使用 Spring Boot 开发 API 使用 Spring Security + OAuth2 + JWT 鉴权,已经在 Controller 配置允许跨域: @RestController @C ...

  6. Django之数据库--ORM

    一.建立数据库模型类 1.在model里创建模型类.(继承models.Model) from django.db import models # Create your models here. c ...

  7. centos7中安装redis出现的问题

    重现步骤: 1.解压redis包后 执行make命令.出现一堆东西,其中有gcc:命令未找到. 解决:安装 yum install gcc-c++(需要有网) 2.安装完gcc命令后,再make.出现 ...

  8. nodejs事件和事件循环简介

    目录 简介 事件 事件循环 事件循环的阻塞 事件循环举例 栈和消息队列 作业队列和promise process.nextTick() setImmediate() setInterval() 简介 ...

  9. Python中判断字符串是否为数字的三个方法isdecimal 、isdigit、isnumeric的差别

    isdecimal .isdigit.isnumeric这三个字符串方法都用于判断字符串是否为数字,为什么用三个方法呢?他们的差别是什么内? isdecimal:是否为十进制数字符,包括Unicode ...

  10. 第10.11节 Python模块和包小结

    Python的模块就是一个独立的Python文件,Python的包是一些功能相关的Python文件放到一个目录下进行统一管理的文件管理结构,包本质上是模块,加载包就是加载包下特定的模块文件__init ...