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. Java开发工程师(Web方向) - 01.Java Web开发入门 - 第3章.Tomcat

    第3章--Tomcat Tomcat安装与运行 Tomcat:目前最常用的基于java的web应用服务器 本课程中所有的Java代码最终都需要部署到Tomcat中运行 Tomcat的配置文件是XML的 ...

  2. 搭建redis集群的过程中遇到的问题

    1.GCC没有安装或版本不对 报错信息如下 CC adlist.o /bin/sh: cc: command not found make[1]: *** [adlist.o] Error 127 m ...

  3. 如何实现iframe页面与父级页面js交互

    处理办法:1.同一域下,相同端口2.父级.子集页面上同时标记 document.domain = "xxx.com" 操作内部元素:1.jQuery使用 iframe.conten ...

  4. react创建新项目并且修改配置文件

    react创建项目 这是我在用react搭建项目时,用到的一些东西,顺序纯属自己定义, 一.创建项目 用react 创建一个项目,这也是官方给出的 1.npm install create-react ...

  5. Chameleon-mini简介

    ChameleonMini(变色龙)原德国大学在研究RFID安全时所设计的一块针对多频段多类型RFID模拟的硬件,其设计本身支持ISO14443和ISO15693标准协议,最简单直接的用法就是把获取到 ...

  6. [C++] Copy Control (part 1)

    Copy, Assign, and Destroy When we define a class, we specify what happens when objects of the class ...

  7. [C++] Fucntions

    Statements A break statements terminate the nearest wile, do while, for or switch statement. A break ...

  8. [leetcode-693-Binary Number with Alternating Bits]

    Given a positive integer, check whether it has alternating bits: namely, if two adjacent bits will a ...

  9. Catch That Cow(BFS广搜)

    Description Farmer John has been informed of the location of a fugitive cow and wants to catch her i ...

  10. Thunder团队第五周 - Scrum会议3

    Scrum会议3 小组名称:Thunder 项目名称:i阅app Scrum Master:王航 工作照片: 苗威同学在拍照,所以不在照片内. 参会成员: 王航(Master):http://www. ...