react在jsx语法中实现for循环

简介: DOCTYPE html> .yew{color:red;} .no{color:#000;} class Hello extends React.
<!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>

 

相关文章
|
1月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
49 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
2月前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
41 4
|
10天前
|
XML 前端开发 JavaScript
React JSX
10月更文挑战第7天
10 2
|
2月前
|
前端开发 JavaScript 开发者
React 的 ES6 语法与 ES5 相比有何不同?
【8月更文挑战第30天】
50 1
|
2月前
|
前端开发 JavaScript
React Server Component 使用问题之添加jsx的组件化能力,如何操作
React Server Component 使用问题之添加jsx的组件化能力,如何操作
|
2月前
|
前端开发 JavaScript 开发者
React组件与JSX之间的区别是什么
【8月更文挑战第9天】 React组件与JSX之间的区别是什么
56 4
|
2月前
|
XML 前端开发 JavaScript
【React新手必看】JSX,让你的代码舞动起来!
【8月更文挑战第24天】JSX(JavaScript XML)是React开发的核心,作为一种JavaScript语法扩展,它支持在代码中使用类似HTML的标签。JSX并非模板语言,在编译过程中转换为纯JavaScript,使React能高效更新DOM并渲染页面。其优势在于直观性、简洁性和灵活性:简化复杂用户界面构建、减少代码量,并支持HTML标签、React组件及JavaScript变量的表达式插入。基本用法涉及定义组件UI,如创建包含标题和段落的简单组件。
68 0
|
2月前
|
XML 前端开发 JavaScript
React——JSX语法【三】
React——JSX语法【三】
28 0
|
3月前
|
JavaScript 前端开发
react18【系列实用教程】JSX (2024最新版)
react18【系列实用教程】JSX (2024最新版)
58 1
|
3月前
|
前端开发 JavaScript 算法
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
64 0