**理解:**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...