使用 JSX 语法的两个注意点

最新推荐文章于 2024-07-24 16:25:01 发布

奋斗的吧小菜鸟

最新推荐文章于 2024-07-24 16:25:01 发布

阅读量4.5k

点赞数

文章标签： react jsx

本文链接：https://blog.csdn.net/luzhaopan/article/details/83054553

版权

在使用react开发项目的时候，机会都会使用到JSX 语法，它的主要特点就是，凡是使用到JavaScript 的值的地方，都可以插入这种类似 HTML 的语法。

const lut= <h1>love u, tiantian!</h1>;

在使用的时候需要有两个注意的点：

所有 HTML 标签必须是闭合的，如果写成<h1>love就会报错。如果是那种没有闭合语法的标签，必须在标签尾部加上斜杠，比如<img src="" />。
任何 JSX 表达式，顶层只能有一个标签，也就是说只能有一个根元素。下面的写法会报错。

// 报错，因为根元素的位置有两个并列的<h1>标签
const lut= <h1>tiantian</h1><h1>520</h1>;

// 不报错，在其外在包裹一个div，就不会报错，因为只允许有一个根元素
const lut= <div><h1>tiantian</h1><h1>520</h1></div>;