<!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. linux-3.0内核移植到fl2440开发板（以MINI2440为模板）

    我们的fl2440开发板使用的是s3c2440的芯片,与MINI2440十分相似,因此需要改动的地方不多,移植也比较容易. 1.[weishusheng@localhost kernel]$ sudo ...

  2. asp.net 自定义控件 嵌入资源文件 备忘

    要想在自定义用户控件中嵌入资源,从以下几个步骤入手: 1.在AssemblyInfo.cs中注册资源,文件夹层级用点隔开.例如: [assembly: System.Web.UI.WebResourc ...

  3. js生成二维码（jquery自带）

    //引入js<script type="text/javascript" src="js/jquery.js"></script> &l ...

  4. sql server 条件 not in (null)总是false

    SELECT  1 WHERE   2 NOT  IN ( 1 ); 结果: (无列名) 1   SELECT  1 WHERE   2 NOT  IN ( 1, NULL ); 结果:(无列名)   ...

  5. Request.UrlReferrer

    1:Request.UrlReferrer可以获取客户端上次请求的url,这样就可以实现类似“上一页”的功能等 2:刷新当前页面,不会改变Request.UrlReferrer的值 3:如果有A,B两 ...

  6. iso 培训笔记

    protocol协议 + 类方法- 实例方法:继承()方法 <> [] 方法调用 .属性:参数mvc storyboard 资源文件info.plist 权限viewcontroller ...

  7. 别再为了this发愁了------JS中的this机制

    别再为了this发愁了------JS中的this机制 题记:JavaScript中有很多令人困惑的地方,或者叫做机制.但是,就是这些东西让JavaScript显得那么美好而与众不同.比方说函数也是对 ...

  8. HackerRank "Jumping on the Clouds"

    DP or Greedy - they are all in O(n) In editorial, a beautiful Greedy solution is given: "To rea ...

  9. iis WebSocket 搭建环境及配置

    http://www.86y.org/art_detail.aspx?id=816       WebSocket是html5新增加的一种通信协议,目前流行的浏览器都支持这个协议,例如Chrome,S ...

  10. <<面向模式的软件架构2-并发和联网对象模式>>读书笔记

    服务访问和配置模式 Wrapper Facade可以将有非对象API提供的函数和数据封装到面向对象的类接口中 就是把底层API再封装一次,让外部不用关心是调用哪个平台的API,不如锁,在不同的平台上可 ...