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= ...
随机推荐
- SQL一致性错误修复SQL
USE master; ); SET @databasename = 'BenlaiTask'; ALTER DATABASE BenlaiTask SET SINGLE_USER WITH ROLL ...
- 高等微积分及其应用 nicholas.pdf——下载地址
http://pan.baidu.com/share/link?shareid=426414429&uk=3977204074 这本书在网络上很少有了,本人是在群里下过来整理成一个文档了,由n ...
- java中枚举(enum)小例子。之前学过枚举但是一直没用,这里有个枚举类帮你我理解下(很肤浅)
直接上枚举类,代码简单易懂. package com.jy.modules.cims.data.interact.tbj.loan.request; /** * * @author shengzhou ...
- Java学习笔记七——数组工具类Arrays
数组工具类Arrays Java提供的Arrays类里包含的一些static修饰的方法可以直接操作数组.若将里面的方法用熟的话,那开发效率会大大提高.下面介绍其中的方法. List<T> ...
- java基础1_Java数据类型
一 . Java的数据类型分为 1.原生数据类型 也叫基本数据类型,分为整形,浮点型,字符型,布尔型.整形有 byte,short,int,long:浮点型有float,double;字符型有 cha ...
- Eclipse安装与配置
http://www.th7.cn/Program/java/201307/144477.shtml http://www.eclipse.org/ 我们下载J2EE版本:Eclipse IDE fo ...
- Handler机制来处理子线程去更新UI线程控件
public class HandlerTestActivity extends Activity { private TextView tv; private static final int UP ...
- docker pull certification error
export DOMAIN_NAME=<my-dtr-domain> echo -n | openssl s_client -showcerts -connect itapregistry ...
- (转)JQuery上传插件Uploadify使用详解
原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...
- 在CentOS上搭建最^1024基本的Nginx反向服务器
昨天有过去的同事突然问我,他在CentOS7上试验搭建反向服务器死活不成功.现将最简单的搭建步骤分享下: 0. 环境介绍 本次搭建的集群包括以下服务器 192.168.1.107:nginx反向服务器 ...