react在jsx语法中实现for循环
<!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循环的更多相关文章
- 前端笔记之React(一)初识React&组件&JSX语法
一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...
- react 的JSX语法需要注意哪些点?
注释方式 ReactDOM.render( <div> {/*JSX 中的注释方式*/} </div>, document.getElementById('root') ) j ...
- React使用JSX语法
目录: 1.在React项目中启用JSX语法 2.在JSX中写js代码 3.使用JSX注意事项 1.在React项目中启用JSX语法 <--返回目录 JSX语法:符合xml规范的js语法 JS ...
- 3.react 基础 - JSX 语法
1.最基础的 JSX 语法 普通javaScript中 引入 标签 let html = '<h1>hello</h1>'; jsx语法 let JSX_html = < ...
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
- react的jsx语法
在webpack.config.js中配置解析的loader { test:/\.jsx?$/, use:{ loader:"babel-loader", options:{ pr ...
- React之JSX语法
1. JSX的介绍 JSX(JavaScript XML)——一种在React组件内部构建标签的类XML语法.react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此 ...
- React之jsx语法特性
jsx 语法,直接可以在js中使用html标签. 还可以通过花括号的形式,在html标签中,写js表达式. <div> { 1 + 2 } hello,world! </div> ...
- React的jsx语法,详细介绍和使用方法!
jsx语法 一种混合使用html及javascript语法的代码 在js中 遇到<xx>即开始html语法 遇到</xx>则结束html语法 恢复成js语法 例如: let D ...
随机推荐
- weex环境搭建
1. 安装weex-toolkit sudo npm install -g weex-toolkit 装完之后就可以使用weex命令了.输入weex命令可以看到: weex test.we --qr ...
- 收集一些有用的docker镜像
https://hub.docker.com/explore/ 是star排名靠前的image =================================================== ...
- Zend Studio 中安装emmet插件的方法
本人的Zend Studio版本是Zend Studio 10.0.0. 1. 打开Zend Studio,点击 Help --> Install New Software,如下图: 2. 在 ...
- maven 环境搭建
1.maven环境搭建 1)下载maven,http://maven.apache.org/download.cgi,到本地解压,然后配置环境变量 MAVEN_HOME:D:\software\apa ...
- 【linux】 解决linux下vsftp 500 OOPS: cannot change directory:/home/ftp/ 办法
用FileZilla连接ftp出现错误,500 OOPS: cannot change directory:/home/ftp 原因是CentOS系统安装了SELinux,因为默认下是没有开启FTP的 ...
- 设置XtraForm标题居中
public class CustomFormPainter : FormPainter { public CustomFormPainter(Control owner, DevExpress.Sk ...
- Python入门5
装饰器 装饰器英文Decorator,自身是一个函数,用来包装其它的函数,实现在不改变原来代码的情况下,增加新的功能,返回一个修改后的函数对象, 装饰器功能: 1.装饰器也是函数 2.在不改变原有代码 ...
- MyBatis原理分析之三:初始化(配置文件读取和解析)
1. 准备工作 编写测试代码(具体请参考<Mybatis入门示例>),设置断点,以Debug模式运行,具体代码如下: )ExecutorType:执行类型,ExecutorType主要有三 ...
- MyBatis学习(一)、MyBatis简介与配置MyBatis+Spring+MySql
一.MyBatis简介与配置MyBatis+Spring+MySql 1.1MyBatis简介 MyBatis 是一个可以自定义SQL.存储过程和高级映射的持久层框架.MyBatis 摒除了大部分的J ...
- OA项目笔记-从建立接口 dao impl action jsp等框架实现crud
1,设计 BaseDao 与 BaseDaoImpl 1,设计接口 BaseDao 1,每个实体都应有一个对应的Dao接口,封装了对这个实体的数据库操作.例 实体 Dao接口 实现类 ======== ...