React如何使用JSX语法

代码目录

编辑

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

运行效果

编辑

聊聊需求

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

开始整活

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

javascript 复制代码

const VDOM = <h1>Hello,React</h1>

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

JSX允许我们通过{}的形式引入js表达式。

javascript 复制代码

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

运行：

编辑

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

javascript 复制代码

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

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

运行：

编辑

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

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

javascript 复制代码

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

答案是不可以，报错了。

编辑

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

相当于你写：

ini 复制代码

const x = js表达式;

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

javascript 复制代码

const VDOM = <div>{
    arr.map(e => {
        return <li>{e}</li>
    })
}</div>

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

javascript 复制代码

let newArr = arr.map(e => {
    return <li>{e}</li>
})
const VDOM = <div>{
    newArr
}</div>

运行：

编辑

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

javascript 复制代码

 //准备数据
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"));

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

编辑

以上代码还可以简写：

javascript 复制代码

 //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>
);

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

编辑

然后再加上css

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;
}

运行：

编辑

3、技术验证

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

公众号

❝

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