在初識 react章節(jié)的最后，創(chuàng)建的第一個 react 項目里，App()方法里的代碼看起來有點(diǎn)兒奇怪。
明明長得像 HTML，卻能揉在 JS 代碼里不用轉(zhuǎn)義。
今天就來認(rèn)識這個奇怪的代碼，也就是基于 JSX 語法寫的代碼。
什么是 JSX 語法
JSX 是 JavaScript 語法的擴(kuò)展，即 JavaScript Extension。
React 使用 JSX 替代常規(guī)的 JavaScript。
它有很多優(yōu)點(diǎn)，個人認(rèn)為最好的一點(diǎn)，是提高了代碼的可讀性。特別是當(dāng)需要使用 JavaScript 操作 DOM 的時候。
const element = <h1 className="myclass">Hello, world</h1>;
JSX 用來申明 react 中的元素。
與瀏覽器 DOM 元素不同，react 中的元素是普通的對象。
react DOM 可以確保瀏覽器 DOM 的數(shù)據(jù)內(nèi)容與 react 元素保持一致。
通過 ReactDOM.render() 的方法，可以將 react 元素渲染到頁面上。
const element = <h1 className="myclass">Hello, world</h1>; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(element);
使用 JSX
那要如何使用 JSX 呢？一個一個來看。
多個 HTML 元素需要使用一個元素包裹
首先要記住的，是當(dāng)有多個 HTML 元素要渲染的時候，一定要在最外層使用元素把所有的元素包裹起來。
const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <div> <h1>IT從業(yè)指北</h1> <h2>一起來學(xué)習(xí) React</h2> </div> );
上面有<h1>和<h2>兩個元素，當(dāng)需要渲染時，就需要在最外層使用<div>或其它元素將它們包裹起來。否則語法會有錯誤。
在 JSX 中使用 JavaScript
在 JSX 中使用 JavaScript 時，表達(dá)式寫在花括號 {} 中
const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <div> <h1>{2024 + 100}</h1> <h1>IT從業(yè)指北</h1> <h2>一起來學(xué)習(xí) React</h2> </div> );
上面的第一個h1里，計算之后的值為 2124。
在 JSX 中不能使用條件判斷語句 if else，但可以使用三元運(yùn)算表達(dá)式來替代。
const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <div>{i == 1 ? '成功' : '失敗'}</div> );
在 JSX 中使用數(shù)組
JSX 允許在模板中插入數(shù)組，且會自動展開數(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> );
以上代碼渲染之后，頁面顯示內(nèi)容如下：
在 JSX 中使用樣式
react 中推薦使用內(nèi)聯(lián)樣式。
使用 camelCase 語法，也就是著名的駝峰語法來設(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 會在特定元素值的數(shù)字后自動添加 px 。比如上述的fontSize值中的 16 表示的是 16px。
JSX 中的注釋
JSX 中的注釋分兩種場景：
在標(biāo)簽內(nèi)：注釋需要花括號
在標(biā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 語法的擴(kuò)展，即 JavaScript Extension。
?? 當(dāng)有多個 HTML 元素要渲染的時候，一定要在最外層使用元素把所有的元素包裹起來。
?? 在 JSX 使用樣式的時候，react 會在特定元素值的數(shù)字后自動添加 px
該文章在 2024/11/28 17:40:03 編輯過
400 186 1886
