在初識(shí) react章節(jié)的最后，創(chuàng)建的第一個(gè) react 項(xiàng)目里，App()方法里的代碼看起來(lái)有點(diǎn)兒奇怪。

明明長(zhǎng)得像 HTML，卻能揉在 JS 代碼里不用轉(zhuǎn)義。

今天就來(lái)認(rèn)識(shí)這個(gè)奇怪的代碼，也就是基于 JSX 語(yǔ)法寫的代碼。

什么是 JSX 語(yǔ)法

JSX 是 JavaScript 語(yǔ)法的擴(kuò)展，即 JavaScript Extension。

React 使用 JSX 替代常規(guī)的 JavaScript。

它有很多優(yōu)點(diǎn)，個(gè)人認(rèn)為最好的一點(diǎn)，是提高了代碼的可讀性。特別是當(dāng)需要使用 JavaScript 操作 DOM 的時(shí)候。

const element = <h1 className="myclass">Hello, world</h1>; 

JSX 用來(lái)申明 react 中的元素。

與瀏覽器 DOM 元素不同，react 中的元素是普通的對(duì)象。

react DOM 可以確保瀏覽器 DOM 的數(shù)據(jù)內(nèi)容與 react 元素保持一致。

通過(guò) ReactDOM.render() 的方法，可以將 react 元素渲染到頁(yè)面上。

const element = <h1 className="myclass">Hello, world</h1>; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(element); 

使用 JSX

那要如何使用 JSX 呢？一個(gè)一個(gè)來(lái)看。

多個(gè) HTML 元素需要使用一個(gè)元素包裹

首先要記住的，是當(dāng)有多個(gè) HTML 元素要渲染的時(shí)候，一定要在最外層使用元素把所有的元素包裹起來(lái)。

const root = ReactDOM.createRoot(document.getElementById("root")); root.render(     <div>       <h1>IT從業(yè)指北</h1>       <h2>一起來(lái)學(xué)習(xí) React</h2>     </div> ); 

上面有<h1>和<h2>兩個(gè)元素，當(dāng)需要渲染時(shí)，就需要在最外層使用<div>或其它元素將它們包裹起來(lái)。否則語(yǔ)法會(huì)有錯(cuò)誤。

在 JSX 中使用 JavaScript

在 JSX 中使用 JavaScript 時(shí)，表達(dá)式寫在花括號(hào) {} 中

const root = ReactDOM.createRoot(document.getElementById("root")); root.render(     <div>         <h1>{2024 + 100}</h1>         <h1>IT從業(yè)指北</h1>         <h2>一起來(lái)學(xué)習(xí) React</h2>     </div> ); 

上面的第一個(gè)h1里，計(jì)算之后的值為 2124。

在 JSX 中不能使用條件判斷語(yǔ)句 if else，但可以使用三元運(yùn)算表達(dá)式來(lái)替代。

const root = ReactDOM.createRoot(document.getElementById("root")); root.render(   <div>{i == 1 ? '成功' : '失敗'}</div> ); 

在 JSX 中使用數(shù)組

JSX 允許在模板中插入數(shù)組，且會(huì)自動(dòng)展開數(shù)組中的所有成員。

var arr = [   <li>HTML教程</li>,   <li>CSS教程</li>,   <li>JavaScript教程</li>, ]; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(   <div>     <h1>IT從業(yè)指北有以下系列教程：</h1>     <ul>{arr}</ul>   </div> ); 

以上代碼渲染之后，頁(yè)面顯示內(nèi)容如下：

在 JSX 中使用樣式

react 中推薦使用內(nèi)聯(lián)樣式。

使用 camelCase 語(yǔ)法，也就是著名的駝峰語(yǔ)法來(lái)設(shè)置內(nèi)聯(lián)樣式。

var myStyle = {     fontSize: 16,     color: '#FF6600' }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(   <div>     <h1>IT從業(yè)指北有以下系列教程：</h1>     <ul style= {myStyle}>{arr}</ul>   </div> ); 

?

這里注意，react 會(huì)在特定元素值的數(shù)字后自動(dòng)添加 px 。比如上述的fontSize值中的 16 表示的是 16px。

JSX 中的注釋

JSX 中的注釋分兩種場(chǎng)景：

• 在標(biāo)簽內(nèi)：注釋需要花括號(hào)

• 在標(biāo)簽外：注釋不能使用花括號(hào)

var myStyle = {     fontSize: 16,     color: '#FF6600' }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(   /*標(biāo)簽外的注釋 */   <div>     <h1>IT從業(yè)指北有以下系列教程：</h1>     {/*標(biāo)簽內(nèi)的注釋.*/}     <ul style= {myStyle}>{arr}</ul>   </div> ); 

總結(jié)

• ?? JSX 是 JavaScript 語(yǔ)法的擴(kuò)展，即 JavaScript Extension。

• ?? 當(dāng)有多個(gè) HTML 元素要渲染的時(shí)候，一定要在最外層使用元素把所有的元素包裹起來(lái)。

• ?? 在 JSX 使用樣式的時(shí)候，react 會(huì)在特定元素值的數(shù)字后自動(dòng)添加 px