<!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. Ret2Libc 练习（1） -- ZwSetInformationProcess

    花了两个小半晚上的时间将0day安全这本书的绕过DEP的第一个实验做了,这里做些笔记. Ret2libc 我现在自己的理解就是在开启DEP保护的情况下,在程序的其他的可执行位置找到可以满足我利用要求的 ...

  2. 利用SPM工具运行自己创建的小组件（使用common-model向后台接口请求数据）

    步骤如下: 1.安装依赖:spm install -e 2.编译:spm build (编译好的东西会放在trunk-dist里面) 3.发布:spm app -d (会出来一个export端口,一般 ...

  3. ANDROID学习之路 转

    版权声明:本文为 stormzhang 原创文章,可以随意转载,但必须在明确位置注明出处!!! 这篇博客背后的故事 一路走来很不容易,刚好知乎上被人邀请回答如何自学android编程, 就借这个机会在 ...

  4. 数据库服务器CPU持续百分之百、部分Session一直处于执行状态---等待事件为：asynch descriptor resize（Oracle Bug ）

    问题描述: 项目反馈数据库服务器的CPU持续100%的情况,跟踪发现很多活动会话的等待事件是“asynch descriptor resize”,并且这些会话一直处于Active状态,而这些会话执行的 ...

  5. js中的replace全局替换

    比如想把str中的所有“&”替换成“&” replace (\&\,"&");只是替换第一个,那么怎么全部都替换呢? replace(new Reg ...

  6. netty研究【1】：编译源代码

    netty作为异步通信底层框架,其优异的性能让我产生了研究他的源码的决定. 代码研究之前,第一步就是要准备环境,至少可以编译通过,下面,就拿github上的4.1分支进行.我的IDE是Intellij ...

  7. python---IPy

    Python第三方模块IPy,可完成高效的IP规划工作 #安装 #pip3 install IPy #最新版本V0.83 IP地址 网段的基本处理 >>>from IPy impor ...

  8. 智能指针weak_ptr解决循环依赖问题

    #include <iostream> #include <memory> class Woman; class Man{ private: std::weak_ptr< ...

  9. Python 网络编程（一）

    Python 网络编程 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. ...

  10. spring 官方下载地址（Spring Framework 3.2.x&Spring Framework 4.0.x）

    spring官方网站改版后,建议都是通过 Maven和Gradle下载,对不使用Maven和Gradle开发项目的,下载就非常麻烦,下给出Spring Framework jar官方直接下载路径: h ...