React的this.props.children
this.props用来获取组件从外部传入的属性,但是this.props.children比较特殊,它是由React给添加上的,表示组件的所有子节点。
this.props.children可以用来读取子节点,或者渲染子节点。
this.props.children所代表的子节点,不仅仅是指一个DOM节点,也包括子组件,它们是可以混合显示的,例如:
<Grid>
Here is a row:
<Row />
Here is another row:
<Row />
</Grid>
1. this.props.children的值类型
this.props.children的值有三种可能:
1. 当前组件没有子节点,为 undefined
2. 若只有一个子节点,类型为 Object
3. 若有多个子节点,类型为 Array
通常不直接处理this.props.children,而是用React.Children.map/forEach等API来操作,
该API进行了类型处理,保证不会出错。
React.children的详细用法,可以参考此处。
React的this.props.children的更多相关文章
- react中对props.children进行操作
之前写的更多的时候是直接使用简写 {props.children} 这样就可以了,但是当有时候需要对传入的子组件进行一些操作的时候需要用到React.Children方法 {React.Childre ...
- React 的高级用法(Children、Component、createElement、cloneElement)
React.Children props.children 代表了所有的子节点. React.Children 用于处理 props.children 的 提供了几个方法 ( map ,foreach ...
- React中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...
- react入门-props.children
在ReactDOM.render里面我们写我们的自定义组件的时候有时需要加一下子元素进去: <!DOCTYPE html> <html lang="en"> ...
- React.js 小书 Lesson22 - props.children 和容器类组件
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...
- React中的this.props.children
React this.props.children this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性.它表示组件的所有子节点. var ...
- Webpack + React 开发 03 props
React中组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloWorld name="John"> ,就是 HelloWorld 组件加入 ...
- React系列之--props属性
版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...
- props.children 和容器类组件
有一类组件,充当了容器的作用,它定义了一种外层结构形式,然后你可以往里面塞任意的内容.这种结构在实际当中非常常见,例如这种带卡片组件: 组件本身是一个不带任何内容的方形的容器,我可以在用这个组件的时候 ...
随机推荐
- ElasticSearch-Java-low-level-rest-client官方文档翻译
人肉翻译,非谷歌机翻,部分地方添加了个人的理解,并做了分割,如有错误请在评论指出.转载请指明原链接,尊重个人劳动成果. High-Level-Rest-Client基于Low-Level ...
- uvaoj 133 - The Dole Queue(逻辑,环形队列数数)
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- Django模型与创建管理员用户
默认情况下, 配置使用SQLite:
- 【SpringCloud】第五篇: 路由网关(zuul)
前言: 必需学会SpringBoot基础知识 简介: spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选. ...
- CentOS 7.2使用tomcat部署jenkins2.130
一.jenkins介绍 Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台.这是一个免费的源代码,可以处理任何类型的构建或持续集成.集成Jenkins可以用于一些测 ...
- UVA 11922 Permutation Transformer(平衡二叉树)
Description Write a program to transform the permutation 1, 2, 3,..., n according to m instructions. ...
- 默认初始化&拷贝初始化&直接初始化&值初始化&列表初始化
一.各种初始化的形式 /* 定义变量形式一:不指定初始值 */ int a; // 默认初始化 /* 定义变量形式二:指定初始值 */ int b = 1; // 拷贝初始化 int b(1); // ...
- 【转】c++面试基础
1,关于动态申请内存 答:内存分配方式三种: (1)从静态存储区域分配:内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在. 全局变量,static变量. (2)在栈上创建:在执行函 ...
- kmeans算法理解及代码实现
github:kmeans代码实现1.kmeans代码实现2(包含二分k-means) 本文算法均使用python3实现 1 聚类算法 对于"监督学习"(supervised ...
- iOS- 如何从Boujour里解析出IP地址(sockaddr *的解析)?
1.前言 之前有网友跟我留言说到: 如何从Boujour 解析完的数组里解析出ip地址? 因为Boujour本身解析完毕之后的addresses是一个数组 那我们如何从这个数组里解析出我们需要的IP地 ...