總結下關於使用React中的JSX的一些細節

2021-10-19 20:06:49 字數 867 閱讀 7404

最近在學react,而react的核心概念是萬物皆js,而為了使用這個概念,react引入了jsx,將html的標籤結合進js中

所以我們很多時候會在外層包裹乙個div原生,我經常使用vue 的template,這點和template很像,最外層只能存在乙個標籤.(但是這點在vue3中改變了,vue3 的template我測試了下,可以放好幾個標籤,不用在最外層包裹乙個)

下圖中的return裡放進去的是html標籤,但是使用了括號進行包裹來換行

這點和vue不同,vue的元件好像不能使用單標籤.但是注意react使用單標籤必須以/結尾

jsx的注釋和html /css /js 中的注釋有所不同,他使用符號進行包裹,再使用/* 這裡新增注釋*/進行注釋.

jsx使用{}嵌入變數

array會被轉換成一行文字

如果需要顯示這些,可以將他們轉換成字串,比如tostring方法,或者 + 空字串(js自動轉換成字串).

下圖中,直接嵌入了乙個物件obj,瀏覽器直接報錯(但是將物件中的值嵌入是可以的)

{}中可以進行加減乘除運算.比如最簡單的字串拼接

{}中是使用 xx ? yy : zz ,意味是否為xx?是的話使用yy,否使用zz

{}中呼叫函式,比如,呼叫函式+括號執行函式

Linux下關於結構體對齊的總結

許多實際的計算機系統對基本型別資料在記憶體中存放的位置有限制,它們會要求這些資料的首位址的值是某個數 k 通常它為4或 8 的倍數,這就是所謂的記憶體對齊,而這個 k則被稱為該資料型別的對齊模數。當一種型別 s的對齊模數與另一種型別 t的對齊模數的比值是大於 1的整數,我們就稱型別 s的對齊要求比t...

Linux下關於結構體對齊的總結

許多實際的計算機系統對基本型別資料在記憶體中存放的位置有限制,它們會要求這些資料的首位址的值是某個數k 通常它為4或8 的倍數,這就是所謂的記憶體對齊,而這個k則被稱為該資料型別的對齊模數。當一種型別s的對齊模數與另一種型別t的對齊模數的比值是大於1的整數,我們就稱型別s的對齊要求比t強 嚴格 而稱...

react中this的使用方法總結

通過this.事件名稱.bind this 進行this繫結。通過箭頭函式進行this繫結。通過賦值的方式進行繫結 var this this 通過this.事件名稱.bind this 進行this繫結。通過在map函式的第二個引數將this傳入進行繫結。通過this.事件名稱.bind this...