react在jsx语法中实现for循环
2017-11-13 11:55
288 查看
<!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语法
- 1.this class is not key value coding-compliant for the key _blockView2.Block语法防止循环引用
- 使用增强for循环实现遍历的注意问题
- Scala语言双重for循环实现打印九九乘法表
- expect语法基础： while、for 循环、if 语句的用法示例
- React高级教程（es6）——（1）JSX语法深入理解
- 从零一起学react(2)---JSX语法进阶
- react jsx语法
- React 之JSX语法
- 使用Java中的for循环来实现九九乘法表
- for循环实现C语言精确延时
- 水晶报表-控制结构-For 循环（Crystal 语法）
- expect语法基础： while、for 循环、if 语句的用法示例
- ios for循环实现九九乘法方程式
- React学习笔记（3）-- JSX语法及特点介绍
- React学习（1）——JSX语法与React组件
- JavaScript的React框架中的JSX语法学习入门教程
- react.js 从零开始（三）JSX 语法及特点介绍
- 一个for循环实现九九乘法表
- java中FOR循环实现累加、四则运算