<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 遍历数组的更多相关文章

  1. 利用React遍历数组，并且用数组的元素生成<li>arrItem</li>标签组

    var numbers = [1,2,3,4,5,6,7,8,9]; ReactDom.render({ <ul> { numbers.map(function(item){ return ...

  2. *使用while循环遍历数组创建索引和自增索引值

    package com.chongrui.test;/* *使用while循环遍历数组 *  *  * */public class test {    public static void main ...

  3. nodejs 遍历数组的两种方法

    var array = [1,2,3]; array.forEach(function(v,i,a){ console.log(v); console.log(i); console.log(a); ...

  4. 原生js使用forEach()与jquery使用each遍历数组，return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...

  5. js中数组遍历for与for in区别(强烈建议不要使用for in遍历数组)

    js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //for ...

  6. 以forin的方式遍历数组时进行删除操作的注意点

    今天在修改某项需求的时候,需要在遍历的时候将匹配项移除掉,采用的时forin的方式遍历,然后运行的时候却crash掉了 for (NSString*str in self.btnArray) { if ...

  7. 使用for循环遍历数组

    package review20140419;/* * 遍历数组 */public abstract class Test1 {    //程序入口    public static void mai ...

  8. php 中遍历数组时使用引用出现的问题

    今天在使用foreach遍历数组时发现,当使用&时会出现问题: $arr = array( array('id' => 100, 'error'=> 'aa'), array('i ...

  9. Java：JSTL遍历数组，List，Set，Map

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

随机推荐

  1. SQL一致性错误修复SQL

    USE master; ); SET @databasename = 'BenlaiTask'; ALTER DATABASE BenlaiTask SET SINGLE_USER WITH ROLL ...

  2. 高等微积分及其应用 nicholas.pdf——下载地址

    http://pan.baidu.com/share/link?shareid=426414429&uk=3977204074 这本书在网络上很少有了,本人是在群里下过来整理成一个文档了,由n ...

  3. java中枚举（enum）小例子。之前学过枚举但是一直没用，这里有个枚举类帮你我理解下（很肤浅）

    直接上枚举类,代码简单易懂. package com.jy.modules.cims.data.interact.tbj.loan.request; /** * * @author shengzhou ...

  4. Java学习笔记七——数组工具类Arrays

    数组工具类Arrays Java提供的Arrays类里包含的一些static修饰的方法可以直接操作数组.若将里面的方法用熟的话,那开发效率会大大提高.下面介绍其中的方法. List<T> ...

  5. java基础1_Java数据类型

    一 . Java的数据类型分为 1.原生数据类型 也叫基本数据类型,分为整形,浮点型,字符型,布尔型.整形有 byte,short,int,long:浮点型有float,double;字符型有 cha ...

  6. Eclipse安装与配置

    http://www.th7.cn/Program/java/201307/144477.shtml http://www.eclipse.org/ 我们下载J2EE版本:Eclipse IDE fo ...

  7. Handler机制来处理子线程去更新UI线程控件

    public class HandlerTestActivity extends Activity { private TextView tv; private static final int UP ...

  8. docker pull certification error

    export DOMAIN_NAME=<my-dtr-domain> echo -n | openssl s_client -showcerts -connect itapregistry ...

  9. (转)JQuery上传插件Uploadify使用详解

    原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...

  10. 在CentOS上搭建最^1024基本的Nginx反向服务器

    昨天有过去的同事突然问我,他在CentOS7上试验搭建反向服务器死活不成功.现将最简单的搭建步骤分享下: 0. 环境介绍 本次搭建的集群包括以下服务器 192.168.1.107:nginx反向服务器 ...