1. 程式人生 > >使用 JSX 語法的兩個注意點

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