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的更多相关文章

  1. react中对props.children进行操作

    之前写的更多的时候是直接使用简写 {props.children} 这样就可以了,但是当有时候需要对传入的子组件进行一些操作的时候需要用到React.Children方法 {React.Childre ...

  2. React 的高级用法(Children、Component、createElement、cloneElement)

    React.Children props.children 代表了所有的子节点. React.Children 用于处理 props.children 的 提供了几个方法 ( map ,foreach ...

  3. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  4. react入门-props.children

    在ReactDOM.render里面我们写我们的自定义组件的时候有时需要加一下子元素进去: <!DOCTYPE html> <html lang="en"> ...

  5. React.js 小书 Lesson22 - props.children 和容器类组件

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...

  6. React中的this.props.children

    React this.props.children this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性.它表示组件的所有子节点. var ...

  7. Webpack + React 开发 03 props

    React中组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloWorld name="John"> ,就是 HelloWorld 组件加入 ...

  8. React系列之--props属性

    版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...

  9. props.children 和容器类组件

    有一类组件,充当了容器的作用,它定义了一种外层结构形式,然后你可以往里面塞任意的内容.这种结构在实际当中非常常见,例如这种带卡片组件: 组件本身是一个不带任何内容的方形的容器,我可以在用这个组件的时候 ...

随机推荐

  1. linux-centos6①

  2. jmeter使用复习

    多终端进程: 配置客户端远程的ip地址和port 在客户端jmeter安装目录的bin目录下,修改配置文件 jmeter.properties 默认的remote_hosts 的值:(将肉鸡的地址加入 ...

  3. Sharepoint 2013与Sharepoint 2016的功能对比

    开发人员功能 SharePoint Foundation 2013 SharePoint Server 2013 Standard CAL SharePoint Server 2013 Enterpr ...

  4. UVa 1586 - Molar Mass - ACM/ICPC Seoul 2007 - C语言

    关键在于判断数字是两位数还是单位数,其他部分没有难度. #include"stdio.h" #include"string.h" #include"c ...

  5. geth账户密码

    xiaocong geth账户密码 123 {d6abe909013d8da914ae2a08c9b58e7b76601b39} 账户密码 123456 0x4A7F15104F54dB3214D2F ...

  6. Redis 错误摘记篇

    yum安装的redis提示如下报错,大概意思就是配置文件和redis-server进程文件版本不一致.. [root@vm-10-104-28-24 yum.repos.d]# redis-serve ...

  7. JavaScript初探系列之Ajax应用

    一 什么是Ajax Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml.也就是异步请求更新技术.Ajax是一种对现有技术的一种新的应用,不 ...

  8. apache 多端口访问 配置

    使用本地ip:端口号,或者修改hosts文件+域名的方法来进行本地多站点web调试.     注意这里是用apache 不是iis 1: 安装好AppServ2.5.9软件,官网是:[url]http ...

  9. 【转载】【翻译】Breaking things is easy///机器学习中安全与隐私问题(对抗性攻击)

    原文:Breaking things is easy 译文:机器学习中安全与隐私问题(对抗性攻击) 我是通过Infaraway的那篇博文才发现cleverhans-blog的博客的,这是一个很有意思的 ...

  10. lol人物模型提取(七)

      9月13号我就把上了贴图的模型文件发了过去,到9月18号他们那的颜色就上好了,一个叫"3d打印旗舰店"的人加了我微信并拍了几张照片发了给我,效果图如下:   第一眼看上去我还是 ...