使用 JSX 语法的两个注意点

在使用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>;

猜你喜欢

转载自blog.csdn.net/luzhaopan/article/details/83054553
今日推荐