react2 react 遍历数组
<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 arr = ['篮球','足球','乒乓球'];
React.render(
<div>
{
arr.map(function(name){
return <div>{name}</div>
})
}
</div>,
document.getElementById("example")
)
</script>
</body>
<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 arr = ['篮球','足球','乒乓球'];
React.render(
<div>
{arr}
</div>,
document.getElementById("example")
)
</script>
</body>
上面代码的arr变量是一个数组，结果JSX会把它的所有成员，添加到模板
react2 react 遍历数组的更多相关文章
- 利用React遍历数组，并且用数组的元素生成<li>arrItem</li>标签组
var numbers = [1,2,3,4,5,6,7,8,9]; ReactDom.render({ <ul> { numbers.map(function(item){ return ...
- *使用while循环遍历数组创建索引和自增索引值
package com.chongrui.test;/* *使用while循环遍历数组 * * * */public class test { public static void main ...
- nodejs 遍历数组的两种方法
var array = [1,2,3]; array.forEach(function(v,i,a){ console.log(v); console.log(i); console.log(a); ...
- 原生js使用forEach()与jquery使用each遍历数组，return false 的区别
原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...
- js中数组遍历for与for in区别(强烈建议不要使用for in遍历数组)
js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //for ...
- 以forin的方式遍历数组时进行删除操作的注意点
今天在修改某项需求的时候,需要在遍历的时候将匹配项移除掉,采用的时forin的方式遍历,然后运行的时候却crash掉了 for (NSString*str in self.btnArray) { if ...
- 使用for循环遍历数组
package review20140419;/* * 遍历数组 */public abstract class Test1 { //程序入口 public static void mai ...
- php 中遍历数组时使用引用出现的问题
今天在使用foreach遍历数组时发现,当使用&时会出现问题: $arr = array( array('id' => 100, 'error'=> 'aa'), array('i ...
- Java：JSTL遍历数组，List，Set，Map
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
随机推荐
- STM32移植RT-Thread后的串口在调试助手上出现：(mq != RT_NULL) assert failed at rt_mq_recv:2085和串口只发送数据不能接收数据问题
STM32移植RT-Thread后的串口在调试助手上出现:(mq != RT_NULL) assert failed at rt_mq_recv:2085的问题讨论:http://www.rt-thr ...
- 响应式web设计之CSS3 Media Queries
开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
- Arcgis API For IOS扩展AGSDynamicLayer新旧版API对比
AGSDynamicLayer(ForSubclassEyesOnly) Category Reference Description This category organizes the meth ...
- Services (服务)
*/ .hljs { display: block; padding: 0.5em; background: #F0F0F0; } .hljs, .hljs-subst, .hljs-tag .hlj ...
- [ImportNew] Perforce - Restoring Mistakenly Deleted Files in Workspace
Shit happens when you accidentally delete some files in your workspace and you have no ideas which o ...
- 浅谈BFC
Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Fo ...
- 第54讲：Scala中复合类型实战详解
今天学习了scala的复合类型的内容,让我们通过实战来看看代码: trait Compound_Type1trait Compound_Type2class Compound_Type extends ...
- UIWebView和Js交互
在日常的ios项目开发中,我们经常会在原生应用中嵌入web页面,通常我们只是进行一个展示,没有其它的一些功能.但是也有一些项目中需要web页面中的html和native进行交互.但是ios sdk 并 ...
- 使用VirtualBox自带管理工具命令为虚拟磁盘扩展空间
VirtualBox虚拟磁盘空间不够了,默认10G.想扩大,图形界面下没有找到可操作菜单.Google了一下用 Vbox自带的命令工具VBoxManage即可解决. C:\Program Files\ ...
- caffe在windows 下的配置及matlab接口编译（无GPU）
本人机子windows 10,matlab2015a,vs2013(官网使用的是vs2013) 1.首先去github上下载caffe的windows包,地址:https://github.com/B ...