<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. socket 通信

    type TWinSocketStringStream = class(TWinSocketStream) public function ReadString(nMaxLength: Integer ...

  2. 02、AngularJs的数据绑定

    我们知道,AngularJs中的数据绑定是双向绑定的,View的改变,会改变Model,Model的改变也会改变View中的值,废话不多说,我们直接上代码. <!DOCTYPE html> ...

  3. java-多线程新特性

    Java定时器相关Timer和TimerTask类 每个Timer对象相对应的是单个后台线程,用于顺序地执行所有计时器任务TimerTask对象. Timer有两种执行任务的模式,最常用的是sched ...

  4. Java程序性能优化技巧

    Java程序性能优化技巧 多线程.集合.网络编程.内存优化.缓冲..spring.设计模式.软件工程.编程思想 1.生成对象时,合理分配空间和大小new ArrayList(100); 2.优化for ...

  5. 获取edit焦点，打开和关闭软键盘

    打开: et_search.requestFocus(); et_search.setFocusable(true); et_search.setFocusableInTouchMode(true); ...

  6. 解决ie8（及其以下）不支持getElementsByClassName的问题

    这篇技术笔记与大家分享的是:解决IE8(及以下)不支持getElementsByClassName的方法.如果有说错的地方,麻烦留言告诉我,我及时更正,一来是更新一下我的认知,二来也是不要误导的他人, ...

  7. centos 安装apache 和 php5.6

    centos 安装 php5.6,安装前需要先安装数据库和apache 安装 apache2.4 安装基础依赖:# yum install gcc gcc-c++ glibc glibc-devel ...

  8. C#与C++的区别！

    (1) 编译目标:C++代码经常编译成汇编语言.而C#则编译成中间语言(IL)它与Java的字节代码有些相似.IL随后在通过Iust-In-Time编译进程转换成本机的可执行代码.IL代码将作为一个装 ...

  9. 扫描二维码判断移动设备（Android/ios），以及判断是否微信端扫描

    <section class="download"> <a href="apk地址" class="android" st ...

  10. LINQ LINQ Operators and Lambda Expression - Syntax & Examples

    LINQ is a cool feature in C# 3.0. Most of the developers are struggling for the syntax and examples. ...