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. hdu1869六度分离(floyd)

    六度分离 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  2. 浅谈如何写出一个让(坑)人(王)很(之)难(王)发现的bug

    该文章内容来自脚本之家,原文链接:https://www.jb51.net/news/598404.html 程序员的日常三件事:写bug.改bug.背锅.连程序员都自我调侃道,为什么每天都在加班?因 ...

  3. (一)Spring Boot修改内置Tomcat端口号--解决tomcat端口被占用的问题

    Spring Boot 内置Tomcat默认端口号为8080,在开发多个应用调试时很不方便,本文介绍了修改 Spring Boot内置Tomcat端口号的方法. 一.EmbeddedServletCo ...

  4. 复合词 (Compund Word,UVa 10391)

    题目描述: 题目思路: 用map保存所有单词赋键值1,拆分单词,用map检查是否都为1,即为复合词 #include <iostream> #include <string> ...

  5. 六:YARN Node Labels

    参考:http://dongxicheng.org/mapreduce-nextgen/hadoop-yarn-label-based-scheduling/ 为不同的DATANODE打标签,通过标签 ...

  6. Hadoop 版本 生态圈 MapReduce模型

    忘的差不多了, 先补概念, 然后开始搭建集群实战 ... . 一 Hadoop版本 和 生态圈 1. Hadoop版本 (1) Apache Hadoop版本介绍 Apache的开源项目开发流程 : ...

  7. JavaScript初探系列之日期对象

    时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.它是一个内置对象——而不是其它对象的属性,允许用户执行各种使用日期和时间的过程. 一   Date 日期对象 ...

  8. Alpha 冲刺(1/10)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作,对多个目标检测及文字识别模型进行评估.实验,选取较 ...

  9. C#语言使用redis

    文章:Redis总结(二)C#中如何使用redis 文章:Redis总结(三)Redis 的主从复制 文章:Redis总结(四)Redis 的持久化

  10. Tomcat服务器学习和使用(一)

    一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...