通过前文我们学习了jsx的基本规则，今天我们将对之前所学的规则来做一系列的练习

回顾

在开始练习之前，我们先来对上一节课程来做一个简单的回顾

  • jsx是类似于XML的js扩展语法
  • jsx的本质是React.createElement(compoment,props,...children)方法的语法糖。
  • jsx可以使用HTML标签，但是jsx表达式中的的标签不是HTML/XML标签
  • jsx内需要通过{}来对js表达式进行支持。
  • jsx任何标签中class属性的指定必须用className来指定
  • jsx内联样式必须使用style={{key: value}}的方式来写
  • jsx虚拟DOM只允许有一个根标签。
  • jsx虚拟DOM中的任何一个标签都必须闭合。
  • jsx中的标签在被渲染时会检查标签首字母
    • 如果jsx中标签首字母小写，那么则将该标签渲染为HTML中同名标签，若无同名标签则会报错。
    • 如果jsx中标签首字母大写，那么react就去渲染对应的组件，若该组件没有定义，则报错。

练习

需求

去求其实也不难，要求动态展示出下面这个列表

前端 js 框架列表

  • Angular
  • React
  • Vue

需求分析

首先上面那一个列表，包含了两个部分

image-20211213092510297

第一部分的列表没有什么好说的，就一个<h2>标签就行了，第二个部分这个列表体，那就重要的部分了。这一块的数据是要动态展示的，不能够直接写死。

代码编写

开发中，我们如果要做一个动态页面，那么数据就要和后端交互来拿到数据并展示到页面上。但是目前我们还不涉及和后端的交互这个方面。所以我们先模拟几条数据。

再来看我们要展示的内容，这个内容每条数据就一个名称，没有其他的东西了，而且是有顺序的，所以说，咱们直接用数组来模拟数据就好。

const data = ["Angular", "React", "Vue"];

那么下一步，我们就该创建虚拟DOM了

const data = ["Angular", "React", "Vue"];
const VODM = (
  <div>
    <h2>前端 js 框架列表</h2>
    <ul>
        // 那么这边应该怎么写呢？
    </ul>
  </div>
);

我们怎么吧data成功地罗列在<ul>标签里呢？按照正常思路是不是肯定得遍历？但是如果我直接把data写在这会怎么样呢？

image-20211212134220520

我们得到了这么一个结果。也就是说react会自动帮我们遍历数组的啊，但是这个数组里面是纯字符串，和我们想要的<li>标签不相符，如果我数组里面是：

const data = [<li>Angular</li>, <li>React</li>, <li>Vue</li>];
const VODM = (
  <div>
    <h2>前端 js 框架列表</h2>
    <ul>
            {data}
    </ul>
  </div>
);

那这样的话生成的效果又是什么样子呢？

image-20211212134655325

这一次刚好是我们想要的样子，所以说react确实会帮我们遍历数组，并且把数组内的元素拼起来。但是正常开发的时候，没有人会在数组里面来放<li>标签的啊，都是纯数据。那么我们是不是又回到了之前的问题上来了？

最终还是要遍历数组。但是又出了一个新问题：

image-20211212135152955

我在写for循环的时候给我报错提醒了。告诉我表达式有异常。前文中我们说过{}的引入是为了支持js表达式。在我们学习js基础语法的时候就学习过什么叫表达式，什么叫语句。

一条表达式执行完之后是会生成一个值的。而语句不会。所以说这里的for循环实际上是一个语句，并不是表达式，所以在这个场景不支持这么做。

那既然这样的话，我们应该怎么做？最基本的思路是不是已经定了？要一个能生成一个值得表达式。最直接的方法是不是就是一个回调函数？那么我们来看一下：

const data = ["Angular", "React", "Vue"];
const VODM = (
  <div>
    <h2>前端 js 框架列表</h2>
    <ul>
      {
        (arr => {
          let out = []
          for (var i = 0; i < arr.length; i++) {
            out.push(<li>{arr[i]}</li>);
          }
          return out;
        })(data)
      }
    </ul>
  </div>
);

这样的话，我们来看一下效果

image-20211212140814737

可以看出我们成功实现了我们的需求。但是有没有觉得有点麻烦啊？那我们换一种写法：

const data = ["Angular", "React", "Vue"];
const VODM = (
  <div>
    <h2>前端 js 框架列表</h2>
    <ul>
      {
        data.map(iter => <li>{iter}</li>)
      }
    </ul>
  </div>
);

这样的话看着是不是就简洁多了，直接用map方法来加工一下数组，但是有一点要注意，这里<li>{iter}<li>标签一定要记住这是在jsx里面，一定要用{}来读取变量。我们来看一下效果：

image-20211212141559433

诶？控制台给我报错了。这是为什么呢？高说我每个<li>标签都必须要有一个唯一的key，但是这个key是做什么的啊？先简单地提一下，我们在使用react操作的都是虚拟DOM，之前介绍虚拟DOM的时候就介绍过，虚拟DOM有一个Diffing算法，这个Diffing算法要用到这个key。所以说那我们给他们加上吧。

const data = ["Angular", "React", "Vue"];
const VODM = (
  <div>
    <h2>前端 js 框架列表</h2>
    <ul>
      {
        data.map((iter,index) => <li key={index}>{iter}</li>)
      }
    </ul>
  </div>
);

这样，我们用每个iter的index来做他们的key就可以了，因为这个数组中的每一个元素的index都是唯一的。

以上这些呢就是我们对之前所学的jsx的一个小练习。

总结

  • react会帮我们自动遍历数组
  • jsx用{}引入的一定是一个表达式
  • jsx遍历生成元素的话，每个元素一定要有一个唯一的key属性

以上就是jsx的练习部分

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/jsx_exec/