<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

    <script src="babel.min.js"></script>

<style>

    .yew{color:red;}

    .no{color:#000;}

</style>

</head>

<body>

    <div id="root"></div>

<script type="text/babel">

    class Hello extends React.Component {

        render(){

        var list = (length) => {

          var res = [];

          for(var i = 0; i < length; i++) {

            res.push(<h2 key={i}>hello react</h2>)

          }

          return res

        }

        return (

          <div>hello {list(this.props.length)}

          </div>

        )

      }

    }

var helloData = 5

    ReactDOM.render(

      <Hello length = {helloData}/>,

      document.getElementById('root')

    );

</script>

</body>

</html>

react在jsx语法中实现for循环的更多相关文章

  1. 前端笔记之React（一）初识React&组件&JSX语法

    一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...

  2. react 的JSX语法需要注意哪些点？

    注释方式 ReactDOM.render( <div> {/*JSX 中的注释方式*/} </div>, document.getElementById('root') ) j ...

  3. React使用JSX语法

    目录: 1.在React项目中启用JSX语法 2.在JSX中写js代码 3.使用JSX注意事项 1.在React项目中启用JSX语法  <--返回目录 JSX语法:符合xml规范的js语法 JS ...

  4. 3.react 基础 - JSX 语法

    1.最基础的 JSX 语法 普通javaScript中 引入 标签 let html = '<h1>hello</h1>'; jsx语法 let JSX_html = < ...

  5. 【JAVASCRIPT】React学习-JSX 语法

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...

  6. react的jsx语法

    在webpack.config.js中配置解析的loader { test:/\.jsx?$/, use:{ loader:"babel-loader", options:{ pr ...

  7. React之JSX语法

    1. JSX的介绍   JSX(JavaScript XML)——一种在React组件内部构建标签的类XML语法.react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此 ...

  8. React之jsx语法特性

    jsx 语法,直接可以在js中使用html标签. 还可以通过花括号的形式,在html标签中,写js表达式. <div> { 1 + 2 } hello,world! </div> ...

  9. React的jsx语法，详细介绍和使用方法！

    jsx语法 一种混合使用html及javascript语法的代码 在js中 遇到<xx>即开始html语法 遇到</xx>则结束html语法 恢复成js语法 例如: let D ...

随机推荐

  1. MYCAT介绍(转)

    从定义和分类来看,它是一个开源的分布式数据库系统,是一个实现了MySQL协议的服务器,前端用户可以把它看作是一个数据库代理,用MySQL客户端工具和命令行访问,而其后端可以用MySQL原生协议与多个M ...

  2. Centos 6.5编译安装yum

    1.删除redhat原有的yum rpm -aq|grep yum|xargs rpm -e --nodeps 2.下载yum安装文件 wget http://mirrors.163.com/cent ...

  3. Tencent://Message/协议的实现原理

    腾讯官方通过 Tencent://Message/协议可以让QQ用户显示QQ/TM的在线状态发布在互联网上:并且点击 XXX  ,不用加好友也可以聊天 官方链接: http://is.qq.com/w ...

  4. 如何通过SerialPort读取和写入设备COM端口数据

    SerialPort类用于控制串行端口文件资源.提供同步 I/O 和事件驱动的 I/O.对管脚和中断状态的访问以及对串行驱动程序属性的访问.另外,SerialPort的功能可以包装在内部 Stream ...

  5. IIS7下使用4.0框架集成模式URLRewriter重写中文URL乱码问题

    解决方法: 1 url中中文先通过Server.UrlEncode编码 2 修改网站编码 3.更改URLRewriter.net中源码 找到RewriterEngine类中 private strin ...

  6. Python中对字节流/二进制流的操作:struct

    前言 前段时间使用Python解析IDX文件格式的MNIST数据集,需要对二进制文件进行读取操作,其中我使用的是struct模块.查了网上挺多教程都写的挺好的,不过对新手不是很友好,所以我重新整理了一 ...

  7. 为luna版本eclipse增加Web插件

    插件地址: http://download.eclipse.org/releases/luna/

  8. [ActionScript 3.0] 对代码加密的有效方法

    package { import flash.display.Loader; import flash.display.Sprite; import flash.net.LocalConnection ...

  9. C#播放声音的四种方法 +AxWindowsMediaPlayer的详细用法

    C#播放声音的四种方法 第一种是利用DirectX 1.安装了DirectX SDK(有9个DLL文件).这里我们只用到MicroSoft.DirectX.dll和 Microsoft.Directx ...

  10. HUD 4007 [扫描线][序]

    /* 大连热身B题 不要低头,不要放弃,不要气馁,不要慌张 题意: 坐标平面内给很多个点,放置一个边长为r的与坐标轴平行的正方形,问最多有多少个点在正方形内部. 思路: 按照x先排序,然后确定x在合法 ...