關於React之JSX語法理解

2022-10-05 06:30:15 字數 1680 閱讀 9019

**理解:**j**ascript和html的結合,碰到《就按照html來解析,碰到{}就按照js來解析。也可以理解為可以在js**書寫html標籤,每個標籤最終都會轉化為js**來執行。

他的語法規則大致如下:

1、必須有根元素,即最外層有且只有乙個標籤;

2、所有的標籤必須閉合;

3、對大小寫敏感,區分是元件還是html標籤;

4、屬性值必須加引號或者加{};

5、標籤內放"<"會報錯,因為他會按照html來解析;

7、陣列的迴圈(每個元素都會返回乙個react元件);

8、jsx允許讓事件直接繫結在標籤上。例如:行內樣式必須使用},也就是說屬性值不能是字串,必須是物件的格式,屬性名四駝峰試的。

對應解釋

1:render()12

3456

73://會被識別為乙個元件,使用之前需要從對應的位置引用,否則會報錯

//被識別為乙個html標籤12

4: //所有的屬性都只有這兩種格式16:

data.map((item,index)=>)12

3457.關於事件繫結,通常使用的方式有三種,1、使用bind繫結;2、使用箭頭函式;3、使用class屬性的方式

1:handleclick() //此處this列印結果就是該元件的例項,如下圖

render()

2:handleclick() //此處this列印結果就是該元件的例項,如下圖

render()>)}

3:handleclick=()=> //此處this列印結果就是該元件的例項,如下圖.要用箭頭函式才行,否則找不到this

render()12

3456

78910

1112

1314

1516

1718

1920

21區別:第一種、第二種,每次render都會重新繫結一次,且第二種引數需要傳遞兩次;

第三種無法繫結引數,通常用於在元件之間的傳遞,子元件接收方式:this.props.handleclick就可以拿到。

第三種使用場景:例如:乙個計步器是乙個單獨的元件,在不同的父元件中需要用到,可以使用

//父元件

export default class f_component extends component

changestepper = (str)=>)

}if(str==='add'))}}

render()}1

2345

6789

1011

1213

1415

1617

1819

2021

2223

2425

//子元件

export default class c_component extends component

render()}/>+)

}}12

3456

78910

1112

1314

15此處樣式忽略,這樣乙個計步器,就可以在任何頁面使用,同時,在父元件也可以拿到計步器當前的數值

注意:在子元件中如果直接通過this.props.changestepper呼叫父元件的方法也可以,這樣的話就需要傳遞兩個方法過來,同時不能加(),否則會直接呼叫,從而報錯。如果通過中間函式轉換一次就可以保證功能的情況下書寫簡單。

React之jsx語法特性

jsx 語法,直接可以在js中使用html標籤。還可以通過花括號的形式,在html標籤中,寫js表示式。hello,world!事件是大寫 addreact中的程式設計思想是,面向資料程式設計。只要定義資料就ok了,資料變了,頁面展示的內容就會變了。react刪除不需要操作dom,只需要運算元據就可...

const語法理解

本篇主要寫給對const語法理解存在誤區的c 學習者,希望所有對這方面比較模糊的朋友可以閱讀並從中找到一些答案。2004 11 19 21 00 const 最早想法是用於取代預處理器 define 這個巨集,從而形成常量的概念。針對常量const物件,const指標及指向const的指標,函式co...

VC 語法理解

1 tchar char和cstring之間的轉換 tchar是mfc中對char的封裝,當字符集是unicode時是雙位元組wchar,在其他字符集下為單位元組char。widechartomultibyte 函式功能 該函式對映乙個unicode字串到乙個多位元組字串。函式原型 int wide...