大前端-React05：关于JSX小练习遍历数组&&map函数和箭头

最新推荐文章于 2024-03-20 05:17:54 发布

菜鸟老文

最新推荐文章于 2024-03-20 05:17:54 发布

阅读量453

点赞数

分类专栏：面试 Web 前端文章标签：前端 react.js javascript

本文链接：https://blog.csdn.net/weixin_44242433/article/details/120927943

版权

面试同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

Web

22 篇文章 0 订阅

订阅专栏

前端

15 篇文章 0 订阅

订阅专栏

主要看3，箭头函数那一块

01-完整代码：
02-代码解释：
03-代码段解释：map+箭头函数

01-完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JSX练习</title>
  </style>
</head>
<body>
  <!-- 准备好一个容器 -->

  <div id="test"></div>


  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    //伪造数据
    const myId=['a','b','c']
    const VDom=(
      <div>
        <h1>字母列表</h1>
            <ul>
                {
                    myId.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }        
            </ul>
        </div>
    )
    //渲染页面
    ReactDOM.render(VDom, document.getElementById('test'))
  </script>
</body>
</html>

02-代码解释：

根据7大规则，大括号里面写js表达式，
所以不要在里面写关键字语句
在这里插入图片描述

在这里插入图片描述

03-代码段解释：map+箭头函数

作为一个半路入坑java程序员，我表示这一段代码是个什么鬼？

const VDom=(
      <div>
        <h1>字母列表</h1>
            <ul>
                {
                    myId.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }        
            </ul>
        </div>
    )

在这里插入图片描述
一顿百度之后，稍微明白了，

（1）首选调用了，myId中map方法

那么好了一个问题来了，什么是map方法：
map() 方法，就是返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。
可以参考文章：js 自带的 map() 方法

（2）map方法里面有啥？

请看2，函数，
a，传入两个参数(item,index)
b，=>表示（function）关键字缩写
c，返回 <li key={index}>{item}</li>

（3）结果-解惑

也就是，他们并不是像我们平时写的代码一样，
单独写在一块，根据不同参数，复用。
他们是先调用，后写内容。

菜鸟老文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大前端-React05：关于JSX小练习遍历数组&&map函数和箭头

主要看3，箭头函数那一块01-完整代码：02-代码解释：03-代码段解释：map+箭头函数（1）首选调用了，myId中map方法（2）map方法里面有啥？（3）结果-解惑01-完整代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>JSX练习</title> </style></head><body> &
复制链接

扫一扫