6.React jsx小练习

最新推荐文章于 2022-04-30 14:22:00 发布

九宫格输入法

最新推荐文章于 2022-04-30 14:22:00 发布

阅读量156

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/Stubborn_bull/article/details/119040051

版权

React 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

本文通过一个jsx小练习展示了如何在React中动态渲染数据。首先创建了一个静态的前端框架列表，然后模拟数据，利用Array.prototype.map()方法动态遍历数组并生成列表项。博客强调了JSX中的表达式与代码的区别，并提供了关键知识点的解释。

摘要由CSDN通过智能技术生成

需求: 动态展示如下列表

在这里插入图片描述

案例：

根据之前所学，先编写一个静态的案例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>jsx小练习</title>
</head>
<body>
   <!-- 准备好一个“容器” -->
   <div id="test"></div>
   
   <!-- 引入react核心库 -->
   <script type="text/javascript" src="../js/react.development.js"></script>
   <!-- 引入react-dom，用于支持react操作DOM -->
   <script type="text/javascript" src="../js/react-dom.development.js"></script>
   <!-- 引入babel，用于将jsx转为js -->
   <script type="text/javascript" src="../js/babel.min.js"></script>

   <script type="text/babel" >
      //1.创建虚拟DOM
      const VDOM = (
         <div>
            <h1>前端js框架列表</h1>
            <ul>
               <li>Angular</li>
               <li>React</li>
               <li>Vue</li>
            </ul>
         </div>
      )
      //2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM,document.getElementById('test'))
   </script>
</body>
</html>

在这里插入图片描述
现在把展示的数据改成动态的，现在并没有与后台交互，所以我们模拟数据就行

const data = ['Angular','React','Vue']

将数组进行循环遍历

<ul>
   {
      data.map((item,index)=>{
         return <li key={index}>{item}</li>
      })
   }
</ul>

在这里插入图片描述

重点：

一定注意区分：【js语句(代码)】与【js表达式】，{}中可以写表达式，但不能写代码
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}
在这里插入图片描述