<!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. Sql server 2008 R2 实现远程异地备份

    1. 环境: a)两台同样的Sql Server 2008 R2 服务器 b)操作系统都是windows 2008 c)需要将102.108.0.1数据库MSGC远程备份到112.118.0.2的服务 ...

  2. tp根据数据库动态创建微信菜单

    喻可伟的博客   tp根据数据库动态创建微信菜单 $button = array();$class = M('ucenter_menu')->limit(3)->select();//取出 ...

  3. Mac系统终端命令行不执行命令 总出现command not found解决方法

    配置过安卓开发环境,改过bash_profile这个文件,最后不知怎么的只有cd命令能执行,我猜测可能修改bash_profile文件后没有保存 导致的     保存命令是:  source .bas ...

  4. DataSet,DataTable与DataRow的复制方法

    DataSet 对象是支持 ADO.NET的断开式.分布式数据方案的核心对象 ,用途非常广泛.我们很多时候需要使用其中的数据,比如取得一个DataTable的数据或者复制另一个DataTabe中的数据 ...

  5. Linux 随机生成随机数

    #!/bin/bash echo $(($RANDOM % 39)) 表示生成0-39的随机数 并且不为0和39

  6. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  7. Rails :布局和视图渲染

    原文地址: http://guides.ruby-china.org/layouts_and_rendering.html Rails 布局和视图渲染 本文介绍 Action Controller 和 ...

  8. [转载]jQuery1.9完全删除live事件

    其实关于live被删除的事件早就在1.7.2版本以后就有通知过了 不过在官方一直提倡使用.on代替.live的过程中 .live事件一直沿用 今天更新了 看下jQuery1.9的相关信息 发现api中 ...

  9. DELL_LCD错误提示代码

    代码 文本 原因E1000 Failsafe voltage error. Contact support.(故障保护电压错误.请联络支持人员.) 查看系统事件记录以了解严重故障事件.E1114 Am ...

  10. python 中__name__ = '__main__' 的作用

    有句话经典的概括了这段代码的意义: "Make a script both importable and executable" 意思就是说让你写的脚本模块既可以导入到别的模块中用 ...