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. selenium,unittest——两个class连续运行

    将多个class放在一个文件内一起运行,这是一个多用例不同网站进行测试的方法 #encoding=utf-8from selenium import webdriverimport time,unit ...

  2. Maven编译Java项目

    Spring在线参考文档: http://spring.io/guides/gs/maven/ 下载安装 Downloadand unzip the source repository for thi ...

  3. 已有海外版Office365,如何开通相同Tenant的Azure

    下面这个步骤是开通海外版Azure的测试账号,请了解! 翻到如图位置 点击免费开始 下一步 输入验证代码,此页没截图 使用信用卡,需要visa或master 下一步认证完就可以使用,没有继续截图

  4. SpringCloud IDEA 教学 (四) 断路器(Hystrix)

    写在开始 在SpringCloud项目中,服务之间相互调用(RPC Remote Procedure Call —远程过程调用),处于调用链路底层的服务产生不可用情况时,请求会产生堆积使得服务器线程阻 ...

  5. 通过Ajax上传文件至WebApi服务器

    https://stackoverflow.com/questions/43013858/ajax-post-a-file-from-a-form-with-axios var formData = ...

  6. HDU 1042 N!(高精度乘)

    Problem Description Given an integer N(0 ≤ N ≤ 10000), your task is to calculate N!   Input One N in ...

  7. HTML5 canvas制作童年的回忆大风车

    今天看到一篇CSS3写的大风车http://www.cnblogs.com/yaojaa/archive/2013/01/30/2882521.html,感觉CSS3太神奇了,这在以前用CSS是想都不 ...

  8. cp的使用

    一.形式 cp [options] source1 source2 source3 .... directory 参数意义: 参数 意义 -i 当目标文件已存在时,会询问是否覆盖 -p 连同文件的属性 ...

  9. 条款03 尽可能使用const

    一.概述 使用const约束对象:可以获得编译器的帮助(指出相关出错的地方) const与成员函数:const重载.转型.避免代码重复 二.细节 1. 为什么有些函数要返回const对象(看上去没必要 ...

  10. VS2005、VS2008中的快捷键、组合键大全

    Ctrl+E,D ----格式化全部代码 Ctrl+E,F ----格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 生成编译 CTRL + O 打开文件 CTRL ...