<!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. VIM常用快捷键

    光标前插入i,行首插入 拷贝当前行 yy或者Y 删除一行dd,删除后进入插入模式cc或者S 粘贴p 撤销u,重做ctrl + r 删除一行dd,删除后进入插入模式cc或者S

  2. (转) Playing FPS games with deep reinforcement learning

    Playing FPS games with deep reinforcement learning 博文转自:https://blog.acolyer.org/2016/11/23/playing- ...

  3. java System.arraycopy 数组复制和合并

    public class Test { public static void main(String[] args) { Integer[] a = {1,2,3}; Integer[] b = {4 ...

  4. bootstrap学习

    1. bootstrap使用了less作为预编译器,他是结构清晰层次分明的css页面构建样式,即使你不喜欢bootstrap的样式,你仍然可以借鉴bootstrap编写css的这种方式 2.boots ...

  5. Linux LVM硬盘管理之一：概念介绍

    一.LVM概念介绍: LVM是 Logical Volume Manager(逻辑卷管理)的简写,它由Heinz Mauelshagen在Linux 2.4内核上实现.LVM将一个或多个硬盘的分区在逻 ...

  6. C#读取文件夹大小

    今天需要做一个读取文件夹大小的功能,为了避免遍历文件夹下所有文件并求出总大小,找到如下的好方法: 首先要在项目中引用一个COM组件:Microsoft Scripting Runtime,这个在Ref ...

  7. 为了体验 ILS 在Win2012R2 Hyper-V上安装Windows 2000 AdvSer

    Win2012 R2 Hyper-V 的集成服务包已不支持Windows 2000 先安装SP4.IE6.更新汇总包,再来安装这个. 安装完成后,会有几个未知设备,直接禁用就可以了. 开启Window ...

  8. 条款19：设计class犹如设计type

    1,新的type对象应该如何被创建和销毁? 这会影响class的构造函数ctor和析构函数dtor,以及内存分配函数和释放函数   //operator new //operator new[] // ...

  9. xcode中使用xib添加autolayout中constrain to margins的不同

    在使用xcode7 在storyboard中添加autolayout中发现 如果添加在view 直接添加到viewcontroller的view 上 constrain to margins    只 ...

  10. APS-C画幅与全画幅

    本次对比将通过视角.景深.暗角.细节等几个方面来展现APS-C画幅与全画幅的差别.希望这篇帖子中的一些说明,能对一些纠结在APS-C画幅 与全画幅之间的朋友有所帮助与参考. 同等焦距下APS-C画幅与 ...