React this.props.children

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

var  NotesList = React.createClass({
render(){
return (
<ol>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>;
})
}
</ol>
)
}
}) ReactDOM.render(
<NotesList>
<span>{hello}</span>
<span>{world}</span>
</NotesList>,
document.body
)

上面代码的NotesList组件有两个span子节点,他们都可以通过this.props.children读取。

这里需要注意,this.props.children的值有三种可能:如果当前组件没有子节点,它就是undefined;如果有一个子节点,数据类型是Object;如果有多个子节点,数据类型就是array。所以,处理this.props.children的时候要小心。

React提供一个工具方法React.Children来处理this.props.children。我们可以用React.Children.map来遍历子节点,而不用担心this.props.children的数据类型是undefined还是object

React中的this.props.children的更多相关文章

  1. react 中state与props

    react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...

  2. React中state与props介绍与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

  3. 【React自制全家桶】四、React中state与props的分析与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

  4. React中state和props分别是什么?

    整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...

  5. react --- React中state和props分别是什么?

    props React的核心思想就是组件化思想,页面会被切分成一些独立的.可复用的组件. 组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外 ...

  6. React中state和props的区别

    props和state都是用于描述component状态的,并且这个状态应该是与显示相关的. State 如果component的某些状态需要被改变,并且会影响到component的render,那么 ...

  7. react中withRouter解决props返回为空

    利用 react + antd 框架书写导航栏时,遇到了几个坑,分别是一级菜单和二级菜单在点击的情况下,高亮没有任何问题,但是再点击浏览器返回按钮时,却就乱套了. 1. 二级菜单中,我们可以通过 pr ...

  8. React中的state与props的再理解

    props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的, ...

  9. React中对render进行的小优化

    react中state和props变化会造成render的重新渲染,有时候我们会在render函数中进行一些稍微复杂的逻辑运算 比如说,像下边这种 在props中将 industries引入,然后对其 ...

随机推荐

  1. java进行微信h5支付开发

    最近在做微信支付开发用的框架是 srpingMVC mybatis spring 下面是开发流程图 我们只需要开发红色标记的模块就可以了. 具体参数详情可以查看微信开发者文档. 新手第一次写,写的不好 ...

  2. luogu3384 /// 树链剖分+线段树模板

    题目大意: https://www.luogu.org/problemnew/show/P3384 树链剖分的讲解 两个dfs() 修改 查询 很详细很好理解 https://www.cnblogs. ...

  3. 随笔-ansible-2

    通过Ansible来搭建一套Web服务架构.[以AD-HOC的形式] Inventory文件内容如下: [proxy] 192.168.40.254 [app] 192.168.40.243 [nos ...

  4. SVG动画制作工具 , 从此抛弃臃肿的gif

    VG简介 只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持 ...

  5. jdk1.8新特性学习

    package com.xll.code.jdk1_8study; import com.xll.code.jdk1_8study.pojo.User; import org.junit.jupite ...

  6. 笔记:简单的面向对象-web服务器

    import socket import re import multiprocessing import time import mini_frame class WSGIServer(object ...

  7. VM 设置windows与Ubuntu 共享文件

    虚拟机  --->  设置  --->  选项   --->   共享文件夹   --->   选择总是启用 添加Windows下的路径   --->   确定 1. 先 ...

  8. JS 实现省市联动

    使用 JavaScript 实现选择省份,后面联动改变成相应省份下的市 原理很简单: 首先创建两个select下拉框(省.市) 初始化的时候让省都显示出来,市为空  ................. ...

  9. Java 多线程 - Volatile关键字

    作者: dreamcatcher-cx 出处: <http://www.cnblogs.com/chengxiao/> 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明 ...

  10. [JZOJ6347] 【NOIP2019模拟2019.9.8】ZYB玩字符串

    题目 题目大意 有一个字符串\(p\).一开始字符串\(s\)为空串. 接下来进行若干次操作:在\(s\)的某个空隙中插入\(p\). 给出操作后的\(s\),问长度最小的\(p\). 思考历程 感觉 ...