❝

1、🍟你可以直接下载本节配套的资源代码，然后导入vscode看效果，也可以跟着教程一点一点敲，都是没问题的。

🤔怎么运行本节代码？ 很简单，随便找个浏览器打开index.html即可。💕

代码目录

React如何使用JSX语法_JSX

和上一小节一样，依然是用最简单的html。

运行效果

React如何使用JSX语法_javascript_02

聊聊需求

用React动态展现一个动态的列表，效果如上。

开始整活

在编写代码之前呢，我们先聊一聊JSX语法，之前我们是这样写的。

const VDOM = <h1>Hello,React</h1>
  • 1.

我们说<h1>Hello,React</h1>就是JSX的语法，从效果来看，就是必须只能有一个根节点。再看需求，要展现一个动态的列表，那就不能写死，需要我们从js变量中提取数据，展示在JSX模板里面。JSX允许我们通过{}的形式引入js表达式。

//准备数据
const arr = ['妙蛙种子', '妙蛙草', '妙蛙花'];
//1.创建虚拟DOM
const VDOM = <div>{arr}</div>
  • 1.
  • 2.
  • 3.
  • 4.

运行：

React如何使用JSX语法_前端_03

确实是可以啊，但是感觉很怪异，它是直接遍历了数组，平铺到页面上了。 改进一下，整个ul·li的列表。

//准备数据
const arr = [<li>妙蛙种子</li>, <li>妙蛙草</li>, <li>妙蛙花</li>];
//1.创建虚拟DOM
const VDOM = <div><ul>{arr}</ul></div>
  • 1.
  • 2.
  • 3.
  • 4.

<li>妙蛙种子</li>就是JSX语法，不要觉得奇怪，如果你实在不适应，也得努力去适应，没办法，JSX就是这样的，它允许你随时随地写上一段HTML代码，贼拉风。

运行：

React如何使用JSX语法_开发语言_04

可以是可以，但是这个数据一般是后端返回的，哪个后端能给你返回带标签的数据呢？ 让我们回顾一下，JSX允许我们通过{}的形式引入js表达式这句话。

问大家一个问题，啥叫表达式呢？ 我这样写可以吗？

const VDOM = <div><ul>{if(true) {return arr}}</ul></div>
  • 1.

答案是不可以，报错了。

React如何使用JSX语法_开发语言_05

所谓js表达式，就是一段JS代码，运行后会返回一个值，比如一个单独的变量，一个函数打括号，一个对象调用了某个方法，都会有一个返回。

相当于你写：

const x = js表达式;
  • 1.

只要上面这个例子不报错，那么右侧的东西，就叫做js表达式。 所以，我们可以这样写：

const VDOM = <div>{
    arr.map(e => {
        return <li>{e}</li>
    })
}</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

arr是一个数组，map出来还是一个数组，但是每一个遍历出来的元素，都加了一个<li></li>，得到一个新的数组，相当于我们刚才写的带li标签的arr。不要觉得奇怪，我换种写法你可能会容易接受一点。

let newArr = arr.map(e => {
    return <li>{e}</li>
})
const VDOM = <div>{
    newArr
}</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

运行：

React如何使用JSX语法_数据_06

这是可以的，那么，如果是对象数组呢？

//准备数据
const arr = [
{ no: 1, name: "妙蛙种子", url: "../../static/img/1.png" },
{ no: 2, name: "妙蛙草", url: "../../static/img/2.png" },
{ no: 3, name: "妙蛙花", url: "../../static/img/3.png" },
];
//1.创建虚拟DOM
const VDOM = (
<ul>
    {arr.map((e) => {
    return (
        <li>
        <div>
            <img src={e.url} />
        </div>
        <div>
            {e.name} No.{e.no}
        </div>
        </li>
    );
    })}
</ul>
);
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("test"));
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

我们设置了每一个数组元素的name，no和url图片，得到的效果如下：

React如何使用JSX语法_开发语言_07

以上代码还可以简写：

//1.创建虚拟DOM
const VDOM = (
<ul className="pokemons">
    {arr.map((e) => (
          <li>
              <div>
                <img src={e.url} />
              </div>
              <div>
                {e.name} No.{e.no}
              </div>
          </li>
    ))}
</ul>
);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

再来说一个，jsx里面怎么设置class，注意了，我们不能直接在ul上写class，而必须写className。

React如何使用JSX语法_前端_08

然后再加上css

.pokemons {
  list-style: none;
  display: flex;
  width: 400px;
  justify-content: space-around;
  background-color: lightcyan;
}
.pokemons li {
  border: 1px solid #ccc;
  padding: 8px;
}
.pokemons li img {
  border: 1px solid #f00;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

运行：

React如何使用JSX语法_JSX_09

3、技术验证

用浏览器打开index.html，检查输出是否符合预期

源码下载

公众号回复 react 即可。

公众号

❝

🎉 这里是 剽悍一小兔，曾经做了好几年的Java,前某大厂后端研发工程师，现在是一名前端工程师，主要技术栈为React+vue3.0+有空会刷刷算法题，平时喜欢打乒乓球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『java小白翻身』发一些比较自认为比较有价值的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。