React中的this.props.children
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的更多相关文章
- react 中state与props
react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...
- React中state与props介绍与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...
- 【React自制全家桶】四、React中state与props的分析与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...
- React中state和props分别是什么?
整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...
- react --- React中state和props分别是什么?
props React的核心思想就是组件化思想,页面会被切分成一些独立的.可复用的组件. 组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外 ...
- React中state和props的区别
props和state都是用于描述component状态的,并且这个状态应该是与显示相关的. State 如果component的某些状态需要被改变,并且会影响到component的render,那么 ...
- react中withRouter解决props返回为空
利用 react + antd 框架书写导航栏时,遇到了几个坑,分别是一级菜单和二级菜单在点击的情况下,高亮没有任何问题,但是再点击浏览器返回按钮时,却就乱套了. 1. 二级菜单中,我们可以通过 pr ...
- React中的state与props的再理解
props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的, ...
- React中对render进行的小优化
react中state和props变化会造成render的重新渲染,有时候我们会在render函数中进行一些稍微复杂的逻辑运算 比如说,像下边这种 在props中将 industries引入,然后对其 ...
随机推荐
- Day 13 : 函数递归,
从前有有座山,山里有座庙,庙里有个老和尚给小和尚们讲故事,讲的什么呀,讲的是,从前有有座山,山里有座庙,庙里有个老和尚给小和尚们讲故事,讲的什么呀?讲的是?...... 递归:1.一个函数再内部调用了 ...
- centos安装完php-fpm、nginx后访问网站出现权限问题
nginx.conf www.conf 这两个文件上面改用户为www. 如果不知道自己的配置文件位置问题,使用命令查找文件位置: find / -name 'nginx.conf' -print 添加 ...
- Python匹马行天下之面向对象
概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 面向过程编程最易被初学 ...
- ES6 学习 -- let const
看过很多大佬的ES6笔记,总结一下学习后的收获,给自己当作一个笔记用用: ES3.ES5定义变量有两种方法:var 和 function ES6定义变量有var.function.let.const等 ...
- Docker学习のWindows下安装Docker
一.docker最初只支持linux的,因此在windows下运行需要虚拟机. 利用VirtualBox建立linux虚拟机,在linux虚拟机中安装docker服务端和客户端 利用Windows的H ...
- Erlang学习记录:输入和输出
输入和输出 输入和输出功能都被定义在io模块 输出功能非常常用,由于erlang项目没有可断点调试的IDE(或者说根本不需要),所以所有的调试操作都是由io输出 来调试的 io:get_line/1. ...
- vim编码方式设置
建议vim的_vimrc文件里设置如下的编码方式: set encoding=utf-8 set fileencodings=ucs-bom,utf-8,cp936 set fileencoding= ...
- HashMap 什么时候进行扩容呢
HashMap扩容: 当HashMap中的元素越来越多的时候,碰撞的几率也就越来越高(因为数组的长度是固定的),所以为了提高查询的效率,就要对HashMap的数组进行扩容,数组扩容这个操作也会出现在A ...
- nginx的配置:目的是使用nginx反向代理后,应用程序获取用户真实ip
一.了解nginx Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为HT ...
- c&c++MFC 调用 js 函数代码
调用函数代码和示例 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlight ...