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 ...
随机推荐
- DELETE ANYTHING
删除任何文件均可,参考: http://bbs.myhack58.com/read.php?tid-946246.htmlDEL /F /A /Q \\?\%1 RD /S /Q \\?\%1 另存为 ...
- mysql下载安装
1.下载 下载地址:http://dev.mysql.com/downloads/mysql/ 根据电脑配置来选,我选了 windows(x86,64-bit),ZIP Archive这个,点击Dow ...
- linux时钟基本概念、CST与UTC、以及NTP简单设置
1,安装linux的时候在设置时间的时候有一个选项:system clock uses UTC,那么这个UTC是什么意思呢? 世界协调时间(Universal Time Coordinated,UTC ...
- Number of 1 Bits
class Solution { public: int hammingWeight(uint32_t n) { string aaa = toBinary(n); ; ; i < sizeof ...
- 每天记一些php函数，jQuery函数和linux命令（一）
简介:学习完了php和jQuery之后,对函数的记忆不到位,导致很多函数没记住,所以为了促进自己的记忆,每天花一点时间来写这个博客. 时间:2016-12-18 地点:太原 天气:晴 一. ...
- 排列组合算法（PHP）
用php实现的排列组合算法.使用递归算法,效率低,胜在简单易懂.可对付元素不多的情况. //从$input数组中取$m个数的组合算法 function comb($input, $m) { if($m ...
- 深入探究 WinRT 和 await
在最近发布的使用 Windows 运行时中异步性来始终保持应用程序能够快速流畅地运行这篇博文中,包含了一些如何在 C# 和 Visual Basic 中使用 await 关键字的示例,允许开发人员在使 ...
- MVVM框架中的一个非常重要的内容：数据双向绑定
双向绑定的意思就是,如下图中,当在input框中输入字符时,红色框框中的字也会随之改变. input框中需要一个绑定:ms-duplex(即“双工绑定”),http://avalonjs.github ...
- ASP.NET 上传文件最大值调整
首先,最容易找到的是web.config下面配置: <!--maxRequestLength=50MB--> <httpRuntime targetFramework="4 ...
- 苹果全新 Mac OS X 系统开放下载
在今天的发布会上,苹果除了发布多款硬件产品之外,还更新了Mac OS X Mavericks(小牛)系统,作为重大改变,这一Mac系统将从今天起开始免费升级. 升级后的Mavericks系统将进一步与 ...