React中Jsx的介紹

2021-10-14 11:25:15 字數 735 閱讀 9956

*優點*

jsx執行更快

型別更安全,編譯過程如果出錯就不能編譯

jsx編寫模板更加簡單快速

*jsx表示式*

由html元素構成

中間如果需要插入變數用{}

{}中間可以使用表示式

{}中間表示式中可以使用jsx物件

屬性和html內容一樣都是用{}來插入內容

jsx樣式

\1. class中不可以存在多個class屬性

例如:

classname

="abc"

classname

=>

\2. style樣式中,如果存在多個單詞屬性的組合,第二個單詞首字母大寫(駝峰命名),或者用引號括起來,否則會報錯

let st=
\3. 多個類共存的操作

let xla="reb";

let el=(

);let arr=["abc","ddfg"].join(" ");

let el2=(

);

\4. 注釋:必須在括號的表示式內書寫,否則報錯

書寫方式:、

*注意:*

jsx必須要有根節點

正常的普通html元素要小寫,如果大寫,預設認為是元件

對REACT中JSX標籤的誤解

function welcome props const element reactdom.render element,document.getelementbyid root 在 codepen 上嘗試讓我們來回顧一下這個例子中發生了什麼 我們呼叫reactdom.render 函式,並傳入作為...

React中jsx呼叫js例子

需求 介面新增乙個 匯入專案 按鈕,點選該按鈕可以執行專案匯入功能。按鈕點選事件部分是jsx語法 而專案匯入部分是封裝的js語法 假設此處用alert 123 代替。若點選按鈕出現alert 123 彈框,表示onclick事件執行了js語法 具體示例如下 專案匯入部分importproject.j...

用於react 中的JSX語法配置方法

什麼是jsx語法 就是符合 xml 規範的 js 語法 語法格式相對來說,要比html嚴謹很多 1.如何啟用 jsx 語法?安裝能夠識別轉換jsx語法的包,就是將jsx轉化為js babel preset react 新增.babelrc配置檔案 新增babel loader配置項 module j...