<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. 关于L'Hopital法则

    1.首先需要使用 罗尔定理 函数f(x)在闭区间[a,b]连续在开区间(a,b)可微,如果f(a)=f(b),那么至少存在一点c使函数导数f'(c)=0 注意需要再(a,b)可微,如果函数有角点,断点 ...

  2. 中国UTM分区

    高斯-克吕格投影是“等角横切圆柱投影”,投影后中央经线保持长度不变,即比例系数为1: UTM投影是“等角横轴割圆柱投影”,圆柱割地球于南纬80度.北纬84度两条等高圈,投影后两条割线上没有变形,中央经 ...

  3. well属性

    Bootstrap 有一个 class 属性叫做 well,它的作用是为设定的列创造出一种视觉上的深度感(一种视觉上的效果,动手写代码体会一下).

  4. DIY操作系统(一)

    先说几句题外话: 回想第一次看到<30天自制操作系统>这本书时,就被这快餐般的标题深深吸引了,我无法想象如此复杂有内涵的内容能在30天就弄出来,直到我花了一个多月看到这本书的第9天时,我放 ...

  5. 位图图像处理控件ImageCapture Suite更新至v9.1

    概述:Dynamsoft公司旗下非常出名的位图图像处理控件ImageCapture Suite更新至了v9.1,这次新版本为Mac版本和IE 9新增了不少功能,同时还对其他组件的性能进行了质的提高! ...

  6. JavaWeb 命名规则

    命名规范命名规范命名规范命名规范 本规范主要针对java开发制定的规范项目命名项目命名项目命名项目命名 项目创建,名称所有字母均小写,组合方式为:com.company.projectName.com ...

  7. monodevelop 突然莫名其妙的将 warning 全部标记为 error

    这是一个关于 monodevelop 的“坑” 我们在用 monodevelop 编译游戏脚本时, 通常会有一些警告,一般这些警告都是无害的, 不影响游戏运行.可是突然有一天, monodevelop ...

  8. C#中调用python方法

    最近因为项目设计,有部分使用Python脚本,因此代码中需要调用python方法. 1.首先,在c#中调用python必须安装IronPython,在 http://ironpython.codepl ...

  9. NY 325 zb的生日

    假设所有西瓜重 Asum,所求的是用 Asum / 2 的背包装,最多装下多少. 刚开始用贪心作的,WA.后来用01背包,结果TLE,数据太大.原来用的是深搜! dfs(int sum, int i) ...

  10. STAF no JSTAF in java.library.path 的终极解决办法

    最近两天在研究利用STAF 实现程序更新包的自动部署测试.运行Demo代码时遇到一个坑.我的安装路径是默认的.C:\STAF\samples\demo在命令行窗口用执行命令:java STAFDemo ...