05-JSX 的語法規則與畫面渲染的實用技巧

JSX 的標籤需閉合

在 HTML 中，有些標籤是不需要閉合的，例如 <img>、<input>，但在 JSX 中，所有的標籤都需要閉合。

1<input type="text">
2<img src="./index.jpg">

在 JSX 中，沒有子元素的標籤也需要閉合，例如：使用自我閉合，如下：

1<input type="text"/>
2<img src="./index.jpg"/>

這樣 JSX transformer 才能夠正確地轉譯。

為什麼 JSX 語法的第一層只能有一個節點？

因為 JSX 語法就是呼叫一次 React.createElement() 方法，而這個方法只會回傳一個 React Element ，又樹狀的資料結構只能有一個根節點，所以 JSX 語法的第一層只能有一個節點，所以如果有多個節點，就必須用共同一個父節點包起來。

1const element = (
2  //highlight-next-line
3  <div>
4    <h1>Hello, world!</h1>
5    <h2>Welcome to React</h2>
6    //highlight-next-line
7  </div>
8);

如果不想因為第一層用 <div></div> 包起來而多一個多餘的 DOM 節點，可以使用 React.Fragment 來包裹或是使用<></>這樣就不會產生多餘的 DOM 節點。

1. 使用 React.Fragment

1const element = (
2  //highlight-next-line
3  <Fragment>
4    <h1>Hello, world!</h1>
5    <h2>Welcome to React</h2>
6    //highlight-next-line
7  </Fragment>
8);

2. 使用 <></>

1const element = (
2  //highlight-next-line
3  <>
4    <h1>Hello, world!</h1>
5    <h2>Welcome to React</h2>
6    //highlight-next-line
7  </>
8);

這兩個方法在瀏覽器轉譯成實際的 DOM 時：

1<div id="root">
2    <h1>Hello, world!</h1>
3    <h2>Welcome to React</h2>
4</div>