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 和容器类组件
有一类组件,充当了容器的作用,它定义了一种外层结构形式,然后你可以往里面塞任意的内容.这种结构在实际当中非常常见,例如这种带卡片组件: 组件本身是一个不带任何内容的方形的容器,我可以在用这个组件的时候 ...
随机推荐
- apache+php+mysql开发环境搭建
一.Apache 因为Apache官网只提供源代码,如果要使用必须得自己编译,这里我选择第三方安装包Apache Lounge. 进入Apachelounge官方下载地址:http://w ...
- katalon系列五:使用Katalon Studio手动编写WEB自动化脚本
上一篇主要讲了怎么录制脚本,这次我们看看怎么手动编写脚本,接下来就编写一个简单的用百度搜索的脚本. 1.我们先抓取页面上的元素,点击工具栏上的Spy Web按钮(地球上有个绿点),URL输入百度地址, ...
- Web自动化测试环境搭建1(基于firefox火狐浏览器)
自动化测试是时代趋势,因此很多测试人员开始研究自动化测试,web自动化测试化测试并不难,但是很多人都是被挡在了环境搭建这一步,后面学习激情全无,这里,韬哥手把手教大家搭建火狐浏览器下的自动化测试环境( ...
- BehaviorDesigner学习
行为树: 行为树设计师插件是一个专门为unity设计的AI插件. 学习用!!!插件地址:链接:http://pan.baidu.com/s/1dF2okPN 密码:b43m 通过继承Behavior中 ...
- js屏蔽/过滤 特殊字符,输入就删除掉,实时删除
1.替换方法: <input type="text" class="domain" onkeyup="this.value=this.value ...
- 打印队列 (Printer Queue,ACM/ICPC NWERC 2006,UVA12100)
题目描述: 题目思路: 使用一个队列记录数字,一个优先队列记录优先级,如果相等即可打印: #include <iostream> #include <queue> using ...
- 文本分类-TextCNN
简介 TextCNN模型是由 Yoon Kim提出的Convolutional Naural Networks for Sentence Classification一文中提出的使用卷积神经网络来处理 ...
- [leetcode-738-Monotone Increasing Digits]
Given a non-negative integer N, find the largest number that is less than or equal to N with monoton ...
- android4.3 Bluetooth分析之扫描分析
android4.3中引入了蓝牙低能耗le(low energy),相应的也有一些方法/类.不过代码里,并没有找到初始调用的地方.所以这里还是先只分析下bt普通的扫描流程(类似android 4.2) ...
- Thunder团队第一周 - Scrum会议4
Scrum会议4 小组名称:Thunder 项目名称:爱阅app Scrum Master:代秋彤 工作照片: 参会成员: 王航:http://www.cnblogs.com/wangh013/ 李传 ...