<listing id="r7f1v"></listing>
<listing id="r7f1v"><var id="r7f1v"></var></listing><listing id="r7f1v"><cite id="r7f1v"><i id="r7f1v"></i></cite></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<thead id="r7f1v"><cite id="r7f1v"></cite></thead>
<listing id="r7f1v"></listing>
<listing id="r7f1v"><cite id="r7f1v"></cite></listing>
<listing id="r7f1v"></listing>
<listing id="r7f1v"></listing>
<progress id="r7f1v"><var id="r7f1v"></var></progress>
<listing id="r7f1v"></listing>
APP開發平臺 > Blog > JSX語法介紹及使用方法

JSX是什么?

JSX是一種JavaScript的語法擴展,首先在React中被進入,其格式比較像是模版語言,但事實上完全是在JavaScript內部實現的。元素是構成React應用的最小單位,JSX就是用來聲明React當中的元素。React主要使用JSX來描述用戶界面,但React并不強制要求使用JSX  ,而JSX也在React之外的框架得到了廣泛的支持,包括Vue.js ,Solid 等。

將 HTML 直接嵌入了 JS 代碼里面,這個就是 React 提出的一種叫 JSX 的語法,這應該是最開始接觸 React 最不能接受的設定之一,因為前端被“表現和邏輯層分離”這種思想“洗腦”太久了。但實際上組件的 HTML 是組成一個組件不可分割的一部分,能夠將 HTML 封裝起來才是組件的完全體,React 發明了 JSX 讓 JS 支持嵌入 HTML 不得不說是一種非常聰明的做法,讓前端實現真正意義上的組件化成為了可能。

好消息是你可以不一定使用這種語法,現在要知道的是,要使用包含 JSX 的組件,是需要“編譯”輸出 JS 代碼才能使用的。

JSX如何使用?

在JSX中可任意使用JavaScript表達式,但要包含在大括號里,例如:2 + 2,user.firstName,以及formatName(user)都是可以使用的。

12345678910111213141516function formatName(user) {    return user.firstName + ' ' + user.lastName;}const user = {    firstName: 'Harper',    lastName: 'Perez'};const element = (    <h1>        Hello, {formatName(user)}!    </h1>);ReactDOM.render(    element,    document.getElementById('root'));

書寫JSX的時候一般都會帶上換行和縮進,這樣可以增強代碼的可讀性。與此同時在JSX代碼的外面擴上一個小括號,這樣可以防止分號自動插入的bug。

JSX本身其實也是一種表達式

在編譯之后,JSX會被轉化為普通的JavaScript對象。所以可以在if或者for語句里使用JSX,將它賦值給變量,當作參數傳入,作為返回值都是允許的:

123456function getGreeting(user) {    if (user) {        return <h1>Hello, {formatName(user)}!</h1>;    }    return <h1>Hello, Stranger.</h1>;}


高效的App定制平臺,標準化、便宜、快!

提交APP定制開發需求
欧美激情一区二区,国产精品区免费视频,欧美激情视频在线播放,久久久亚洲综合久久98,久久国产精品99精品国产