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. Qt-第一个QML程序-4-自定义按钮类,动画,状态

    上篇中,我们写到了自己定义了一个按钮,但是呢,按照这样的写法,要写一个程序出来,那要累死了,所以,qml给我的感觉就是各种随便调用,所以了,可以自己写一个自己Button的qml,这样在以后用到了,就 ...

  2. python3 小实践(一)——selenium获取的cookie传递

    from selenium import webdriver from time import sleep import requests import pickle #获取登录后的cookies c ...

  3. git基础(2)

    三.查看提交历史日志查看·提交历史:git log 命令一个常用的选项是 -p,用来显示每次提交的内容差异. 你也可以加上 -2 来仅显示最近两次提交如果你想看到每次提交的简略的统计信息,你可以使用 ...

  4. 了解Python控制流语句——break 语句

    这篇文章主要介绍了详解Python中break语句的用法,是Python入门的呼出知识,需要的朋友可以参考下,python基础系列教程之-Python break语句 跳出循环 break 语句用以中 ...

  5. 【20180807模拟测试】T2 box

    [问题描述] 有个桌子长 R 宽 C,被分为 R*C 个小方格.其中,一些方格上有箱子,一些方格上有按 钮,一些方格上有障碍物,一些方格上是空地.现在有个任务,需要把所有箱子推到这些按 钮上面.箱子有 ...

  6. python3中使用python2中cmp函数出现错误

    在python2中我们经常会使用cmp函数来比较一些东西,但是在python3中,你再来使用这个函数的时候,发现就报错了,提示找不到这个函数,这是为啥呢? 答:新版的python已经舍弃这种用法 而在 ...

  7. vs2008 c#项目调试dll源码,问题:“若要调试此模块,请将其项目生成配置更改为“调试”模式” 的解决方案

    情况: 1:有程序 Trans.exe 的vs2008 c#源码:Trans.exe项目里引用了 Water.dll: 2:有Water.dll的项目源码: 3:想在Trans.exe里调试Water ...

  8. 常用实例:js格式化手机号为3 4 4形式

    如何在填写手机号时将格式转换为3 4 4形式: 一:填写手机号时,在keyup事件中判断长度,符合条件时在值后面插入空格 $('#username').on('keyup',function(e){ ...

  9. $http.get(...).success is not a function 错误解决

    $http.get(...).success is not a function 错误解决 1.6 新版本的AngularJs中用then和catch 代替了success和error,用PRomis ...

  10. popen()与system()

    一.popen() 用途:执行shell命令(并读取其输出或向其发送一些输入) 特点:通过管道来与shell命令进行通信 二.system()