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 ...
随机推荐
- php安装libiconv-1.14.tar.gz遇到的问题
遇到的Error code In file included from progname.c:26:0: ./stdio.h:1010:1: error: ‘gets‘ undeclared here ...
- (转)java中的进程与线程
(转自地址http://www.ibm.com/developerworks/cn/java/j-lo-processthread/) Java 进程的建立方法 在 JDK 中,与进程有直接关系的类为 ...
- 第十二章：使用FP-growth算法进行关联分析
- Windows 商店应用中使用 SharePoint REST API
前面一篇我们介绍了 Office 365 REST API 的官方工具的使用,本篇我们来看一下 SharePoint REST API 本身的描述.结构和使用方法,以及一些使用经验. 首先来看看Sha ...
- java设计模式--简单工厂模式
简单工厂设计模式 工厂模式就是专门负责将大量有共同接口的类实例化,而且不必事先知道每次是要实例化哪一个类的模式.它定义一个用于创建对象的接口,由子类决定实例化哪一个类. 核心知识点如下: (1) 大 ...
- 理解一下单片机的I2C和SPI通信
应某位网友要求,今天说一下单片机的I2C SPI通信,可能说不清楚,因为这毕竟要做实验才可完全理解. I2C和SPI是两种不同的通信协议. 听到协议,似乎高不可攀,其实协议就是人们定义的一个标准而已, ...
- java servlet之过滤器1（解决jsp之间POST方式数据传递乱码）
首先,看看没有解决乱码的效果,新建两个jsp页面(a.jsp跳转到b.jsp). <form action="b.jsp" method="post"&g ...
- SQLSERVER 里SELECT COUNT(1) 和SELECT COUNT(*)哪个性能好？
SQLSERVER 里SELECT COUNT(1) 和SELECT COUNT(*)哪个性能好? 今天遇到某人在我以前写的一篇文章里问到 如果统计信息没来得及更新的话,那岂不是统计出来的数据时错误的 ...
- SQL入门经典(九) 之自定义函数
UDF和存储过程很类似,用户自定义函数是一组有序的T-SQL语句,这些语句被预先优化和编译,并且可以作为一个单元来测试调用.UDF和存储过程的主要区别在于结果返回方式,为了能支持更多返回值,UDF比存 ...
- ASP.NET 开发必备知识点(2)：那些年追过的ASP.NET权限管理
一.前言 在前一篇文章已经为大家介绍了OWIN和Katana,有了对他们的了解之后,才能更好地去学习Asp.net Identity,因为Asp.net Identity的实现集成了Owin.其实在A ...