<!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. MYSQL常见语句

    SHOW INDEXES  from tablename EXPLAIN  tablename EXPLAIN SELECT *  FROM tablename

  2. NIO NIO.2

    An NIO.2 primer, Part 1: The asynchronous channel APIs http://blog.arganzheng.me/posts/java-network- ...

  3. nginx入门篇----nginx服务器基础配置

    1.nginx.conf文件结构...                         #全局块  events{  ...  }  http                      #http块{ ...

  4. 【转】excel 末尾是0 恢复数据方法

    今天从数据库里面查了点数据,用plsql导出为csv数据后用excel打开后就出问题了,显示的问题,excel中会遇到一列中因为数字太长,结果变成了用科学计数法来表示,而这种损失不可逆的,及时改变其格 ...

  5. Oracle RAC asm常用命令

    在Oracle RAC环境下,使用grid帐号执行 运行asmcmd进入asm命令模式,如: [grid@oradb-node1 ~]$ asmcmd ASMCMD> ASMCMD> du ...

  6. jsp脚本元素

    在JSP页面中有三种脚本元素(Scripting Elements):声明.小脚本和表达式. 声明(declaration)用来在JSP页面中声明变量和定义方法.声明是以<%!开头,以%> ...

  7. C++程序设计（关于函数中数组传递的一点心得）

    题目: 10个学生考完期末考试评卷完成后,老师需要划出及格线,要求如下: (1) 及格线是10的倍数: (2) 保证至少有60%的学生及格: (3) 如果所有的学生都高于60分,则及格线为60分:   ...

  8. setTimeout()与setInterval()

    一.setTimeout与setInterval的用法(http://www.css88.com/archives/5804) setTimeout是超时调用,javascript是一个单线程的解析器 ...

  9. Oracle 支持在具有 DHCP 分配的 IP 地址的系统上进行安装

    今天在安装Oracle 10g的时候,遇到了“ Oracle 支持在具有 DHCP 分配的 IP 地址的系统上进行安装” 这个问题,经过搜索,找到了解决方案,具体如下: win7下右键单机" ...

  10. 源码阅读笔记 - 3 std::string 与 Short String Optimization

    众所周知,大部分情况下,操作一个自动(栈)变量的速度是比操作一个堆上的值的速度快的.然而,栈数组的大小是在编译时确定的(不要说 C99 的VLA,那货的 sizeof 是运行时计算的),但是堆数组的大 ...