react4 props 解析
<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>
<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var NoteList = React.createClass({
render: function () {
return (
<ul>
<li>{this.props.children}</li>
</ul>
)
}
})
React.render(
<NoteList>
<p>11111</p>
<p>2222</p>
</NoteList>
,
document.getElementById('example')
)
</script>
this.props对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children属性。它表示组件的所有子节点。
上面代码的NoteList组件有两个span子节点，它们都可以通过this.props.children读取
<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>
<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var NoteList = React.createClass({
render: function () {
return (
<ul>
{
this.props.children.map(function (children) {
return <li>{children}</li>;
})
}
</ul>
)
}
})
React.render(
<NoteList>
<p>11111</p>
<p>2222</p>
</NoteList>
,
document.getElementById('example')
)
</script>
</body>
这里需要注意，只有当子节点多于1个时，this.props.children才是一个数组，否则是不能用map方法的，
react4 props 解析的更多相关文章
- caffe中的props
VS .props解析 在VS 2010项目文件夹中属性表文件的新的格式(.props).Visual Studio 2010引入了用户设置文件(Microsoft.cpp.<Platfor ...
- 利用SAX解析读取XML文件
xml 这是我的第一个BLOG,今天在看<J2EE应用开发详解>一书,书中讲到XML编程,于是就按照书中的步骤自己测试了起来,可是怎么测试都不成功,后来自己查看了一遍源码,发现在读 ...
- 通过源码分析MyBatis的缓存
前方高能! 本文内容有点多,通过实际测试例子+源码分析的方式解剖MyBatis缓存的概念,对这方面有兴趣的小伙伴请继续看下去~ MyBatis缓存介绍 首先看一段wiki上关于MyBatis缓存的介绍 ...
- VS2010属性表的建立与灵活运用
问题引入:在VS2010当中,进行opencv.QT等的编程时,总是需要配置很多属性还有依赖项等,为了减少每次都重复配置属性的工作量,现在可以运行属性表这个东西来简化配置.opencv也可以这样建立使 ...
- Vue3语法快速入门以及写一个倒计时组件
Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...
- 初识vue3.0
vue3.0 源码组织方式的变化 采用ts重写 独立的功能模块提取到单独的包中 90%的api兼容Vue2.x Composition API 组合api 解决vue2.x options api 开 ...
- SpringMVC入门案例及请求流程图（关于处理器或视图解析器或处理器映射器等的初步配置）
SpringMVC简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 Spring结构图 Spr ...
- 浅解析js中的对象
浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...
- Vue 源码解析：深入响应式原理（上）
原文链接:http://www.imooc.com/article/14466 Vue.js 最显著的功能就是响应式系统,它是一个典型的 MVVM 框架,模型(Model)只是普通的 JavaScri ...
随机推荐
- 第十二章：使用FP-growth算法进行关联分析
- MySQL的安装配置
安装配置 MySQL1.官方下载 MySQL2.用 tar 解压.tar.bz 或.tar.gz3.解压后有三个目录,分别为 usr etc var4.进入 usr,进入 bin5.在主机上建个目录( ...
- getline函数彻底说明
因为之前每次使用这个函数都要在网上查一遍,觉得很麻烦,这次就认真地整理一下,希望写完之后就记住. getline函数其实有两个: 一个是全局函数,include<cstring>, 原型是 ...
- Mac：文件夹树型展示 tree
目标: 想要在MAC的Terminal中查看文件夹中所有文件的树型结构及文件夹.文件树统计. 安装方法: 1.brew安装 官网:http://brew.sh/ brew是Mac中安装软件的神器,一定 ...
- storm trident 示例
Storm Trident的核心数据模型是一批一批被处理的“流”,“流”在集群的分区在集群的节点上,对“流”的操作也是并行的在每个分区上进行. Trident有五种对“流”的操作: 1. 不 ...
- 关于Android的背景色配色小结
三基色原理:三基色是指红,绿,蓝三色,人眼对红.绿.蓝最为敏感,大多数的颜色可以通过红.绿.蓝三色按照不同的比例合成产生.同样绝大多数单色光也可以分解成红绿蓝三种色光.这是色度学的最基本原理,即三基色 ...
- ubuntu 14.04 下svn + apache2 配置
1.svn的配置 sudo apt-get install subversion // 安装svn mkdir /home/svn // 创建仓库 svnadmin create /home/svn/ ...
- c# 列举所有窗口和子窗口
private delegate bool WNDENUMPROC(IntPtr hWnd, int lParam); [DllImport("user32.dll", Exact ...
- linux编译php的c扩展
第一步:安装php5 第二步:打开终端[为来方便,这里使用root用户],使用CD命令进入到php5源码包的ext目录 第三步:在终端键入以下命令 ./ext_skel --extname=extes ...
- FSM 浅谈
之前写过一篇关于状态机的,上一篇讲过的我也就不再罗嗦了,不知道欢迎去查看我的上一篇随笔,主要是感觉上次自己封装的还是不行,所以又进行修改了一番! 我本人是个菜鸟,最开始接触状态机的时候,状态机一个可厉 ...