React.Children

props.children 代表了所有的子节点。

React.Children 用于处理 props.children 的

提供了几个方法 ( map ,foreach )

遍历所有的子节点,并且配合 React.cloneElement / React.createElement 使用

React.PureComponent / React.Component

通过 ES6 继承创建组件的两种方式:一个是未深度检查和深度检查

其他创建组件方法:

React.createClass({})  移除

无状态组件

React.createElement

React.createElement

实时创建一个直接创建一个组件

React.createElement(
type,
[props],
[...children]
)

  

React.cloneElement

克隆要给组件,备用

React.cloneElement(
element,
[props],
[...children]
)

  

vue 直接用方法创建dom

render(createElement) {
return createElement('section', {
style: '',
attrs: {
style: 'width: 100%;height: 100%;overflow: hidden;position: relative',
},
ref: 'box'
}, [
createElement('section', {
style: '',
attrs: {
style: '-webkit-transition: all 0s;transition: all 0s;-webkit-transform: translate(0,0);transform: translate(0,0);height: 100%',
},
ref: 'slideBox'
}, [
this.$slots.default,
this.$slots.default,
this.$slots.default,
]),
(this.pagination ? createElement('div', {
attrs: {
class: 'jt-com-flex jt-com-center pagination',
},
}, (() => {
const pag = []
for (let i = 0; i < itemLength / 3; i++) {
pag.push(createElement('p', {
'class': {
active: Math.abs(this.index % 3) === i,
},
}))
}
return pag
})()) : null)
])
},

  

React 的高级用法(Children、Component、createElement、cloneElement)的更多相关文章

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

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

  2. 再谈Newtonsoft.Json高级用法

    上一篇Newtonsoft.Json高级用法发布以后收到挺多回复的,本篇将分享几点挺有用的知识点和最近项目中用到的一个新点进行说明,做为对上篇文章的补充. 阅读目录 动态改变属性序列化名称 枚举值序列 ...

  3. 你不可不知的 React Native 混合用法(Android 篇)

    前言 当前 React Native 虽说版本更新比较快,各种组件也提供的很全面了,但是在某些情况下,混合开发的方式才会快速缩短开发周期,原因无非就是原生平台的"底蕴"无疑更深,拥 ...

  4. 爬虫—Requests高级用法

    Requests高级用法 1.文件上传 我们知道requests可以模拟提交一些数据.假如有的网站需要上传文件,我们也可以用requests来实现. import requests files = { ...

  5. vue keep-alive保存路由状态2 (高级用法,接上篇)

    接上篇 https://www.cnblogs.com/wangmaoling/p/9803960.html 本文很长,请耐心看完分析. 4.高级用法,指定从什么组件进入才缓存,以及销毁缓存:先介绍我 ...

  6. django基础之day05,F与Q查询,Q查询的高级用法

    #F与Q查询 #*************************** F 查询 ******************** # F 查询数据库中的其他字段!!! #1.查询库存数大于卖出数的书籍 fr ...

  7. vue路由高级用法

    五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',r ...

  8. React Context 的用法

    在React的官方文档中,Context被归类为高级部分(Advanced),属于React的高级API,但官方并不建议在稳定版的App中使用Context. The vast majority of ...

  9. Visual Studio 宏的高级用法

    因为自 Visual Studio 2012 开始,微软已经取消了对宏的支持,所以本篇文章所述内容只适用于 Visual Studio 2010 或更早期版本的 VS. 在上一篇中,我已经介绍了如何编 ...

随机推荐

  1. Frightful Formula Gym - 101480F (待定系数法)

    Problem F: Frightful Formula \[ Time Limit: 10 s \quad Memory Limit: 512 MiB \] 题意 题意就是存在一个\(n*n\)的矩 ...

  2. hive基础知识三

    1. 基本查询 注意 SQL 语言大小写不敏感 SQL 可以写在一行或者多行 关键字不能被缩写,也不能分行 各子句一般要分行写 使用缩进提高语句的可读性 1.1 全表和特定列查询 全表查询 selec ...

  3. 洛谷 P1972 [SDOI2009]HH的项链-二维偏序+树状数组+读入挂(离线处理,思维,直接1~n一边插入一边查询),hahahahahahaha~

    P1972 [SDOI2009]HH的项链 题目背景 无 题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含 ...

  4. libvirt原理

    引用原文: https://blog.csdn.net/BtB5e6Nsu1g511Eg5XEg/article/details/80142155 libvirt是目前使用最为广泛的针对KVM虚拟机进 ...

  5. Mac上安装Python3虚拟环境(VirtualEnv)教程

    如果已经安装好pip3,那么执行命令安装virtualenv环境 pip3 install virtualenv 安装完成检测版本是否安装成功 virtualenv --version 创建新目录 M ...

  6. 数据库的范式(1NF、2NF、3NF、BCNF)转载

    文章属于转载:https://www.cnblogs.com/hi-bazinga/archive/2012/06/05/2536806.html 第一范式:关系模式中,每个属性不可再分.属性原子性第 ...

  7. 【Beta】Scrum meeting 8 & 助教参会记录

    目录 写在前面 进度情况 任务进度表 Beta-1阶段燃尽图 遇到的困难 助教参会会议情况 会议具体内容 Q:最近压力大吗?临近期末,注意好时间安排 Q:最近进度如何,以后的计划如何 Q:这段时间遇到 ...

  8. web程序设计关于我们

    项目名称 福大咸鱼市场 开发团队 项目板块 负责人 美工 黄鸿杰 后端 胡继文 前端 葛家灿 联系方式:1175204449@qq.com

  9. 第08组 Alpha冲刺(3/4)

    队名 八组评分了吗 组长博客 小李的博客 作业博客 作业链接 组员1李昕晖(组长) 过去两天完成了哪些任务 文字/口头描述 11月19日了解各个小组的进度与难以攻破的地方,晚上安排开会,安排新的冲刺任 ...

  10. [Web] How to Test React and MobX with Jest

    转载自: https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest?utm_content=bu ...