資訊專(zhuān)欄INFORMATION COLUMN
摘要：前言在中，我們的頁(yè)面內(nèi)容就是通過(guò)來(lái)編寫(xiě)，那么到底是什么呢其實(shí)就是對(duì)象，會(huì)構(gòu)建創(chuàng)建一個(gè)對(duì)象來(lái)描述結(jié)構(gòu)的信息。這里要記住是的一種擴(kuò)展語(yǔ)言，類(lèi)似但是又不是，因?yàn)橹羞€能進(jìn)行運(yùn)算，判斷，加入一些語(yǔ)言等。
前言
在react中，我們的頁(yè)面內(nèi)容就是通過(guò)JSX來(lái)編寫(xiě)，那么JSX到底是什么呢？JSX其實(shí)就是JavaScript對(duì)象，會(huì)構(gòu)建創(chuàng)建一個(gè)js對(duì)象來(lái)描述HTML結(jié)構(gòu)的信息。這里要記住JSX是js的一種擴(kuò)展語(yǔ)言，類(lèi)似HTML但是又不是HTML，因?yàn)镴SX中還能進(jìn)行運(yùn)算，判斷，加入一些js語(yǔ)言等。
JSX中的運(yùn)算 render() {
return(
算數(shù)題
- 5+6={5+6}
- 6+6={6+6}
- 10*10={10*10}
)
}
在JSX中是用 {} 來(lái)區(qū)分是HTML還是js的，也就是說(shuō)，所有的js語(yǔ)言都得用 {} 括起來(lái)
JSX中的變量 render() {
const flag = true;
return(
{flag ? (flag為真) : (flag為假)}
)
}
JSX中的樣式
在JSX中,給元素添加樣式也是用style屬性，但是style里面放的是一個(gè)樣式對(duì)象，如下所示：
render() {
var newStyle = {
background: "blue",
fontSize:"15px"
}
return(
顏色
樣式
)
}
通過(guò)上述案例，我們可以知道JSX中，樣式的屬性名稱(chēng)得用駝峰命名
JSX中的HTML標(biāo)簽在JSX中，有些標(biāo)簽名稱(chēng)為了防止沖突得做一些轉(zhuǎn)換：
class得用className代替
lable元素中的for屬性，得用htmlFor代替，如下：
這里還要注意，JSX中的所有標(biāo)簽必須得是閉標(biāo)簽
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108303.html
摘要：定義一個(gè)組件可以在其他組件中調(diào)用這個(gè)組件調(diào)用組件劉宇組件插入內(nèi)容在上面的案例中可以看到吧寫(xiě)到當(dāng)中，這種寫(xiě)法稱(chēng)為。 React初識(shí) React是Facebook推出的一個(gè)javascript庫(kù)(用來(lái)創(chuàng)建用戶(hù)界面的Javascript庫(kù))，所以他只是和用戶(hù)的界面打交道，你可以把它看成MVC中的V(視圖)這一層。 組件 React的一切都是基于組件的。web世界的構(gòu)成是基于各種HTML標(biāo)簽的...
摘要：系列一初識(shí)系列二組件的和系列三組件的生命周期是推出的一個(gè)庫(kù)，它的口號(hào)就是用來(lái)創(chuàng)建用戶(hù)界面的庫(kù)，所以它只是和用戶(hù)界面打交道，可以把它看成中的視圖層。系列一初識(shí)系列二組件的和系列三組件的生命周期 React系列---React（一）初識(shí)ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 showImg(https://...
摘要：初識(shí)依稀記得那年參加線(xiàn)下活動(dòng)，第一次聽(tīng)說(shuō)這個(gè)詞語(yǔ)，當(dāng)時(shí)的主講人是郭達(dá)峰，他播放了一個(gè)關(guān)于及的性能對(duì)比視頻。合成事件會(huì)以事件委托的方式綁定到組件最上層，并且在組件卸載的時(shí)候自動(dòng)銷(xiāo)毀綁定的事件。 初識(shí)React 依稀記得2015那年參加線(xiàn)下活動(dòng)，第一次聽(tīng)說(shuō)React這個(gè)詞語(yǔ)，當(dāng)時(shí)的主講人是郭達(dá)峰，他播放了一個(gè)關(guān)于ember、angular及react的性能對(duì)比視頻： React.js Co...
摘要：創(chuàng)建組件創(chuàng)建組件之前要注意以下幾點(diǎn)組件創(chuàng)建的名稱(chēng)首字母得大寫(xiě)組件中返回的只能是一個(gè)根節(jié)點(diǎn)，所有的內(nèi)容得用一個(gè)元素都框起來(lái)無(wú)狀態(tài)函數(shù)式組件無(wú)狀態(tài)函數(shù)式組件可以理解成就是一個(gè)函數(shù)生成的，使得代碼的可讀性更好，并且精簡(jiǎn)便利，減少了冗余，無(wú)狀態(tài)組件 創(chuàng)建組件 創(chuàng)建組件之前要注意以下幾點(diǎn)： 組件創(chuàng)建的名稱(chēng)首字母得大寫(xiě) 組件中返回的JSX只能是一個(gè)根節(jié)點(diǎn)，所有的內(nèi)容得用一個(gè)元素都框起來(lái) 1.無(wú)...
閱讀 2045·2023-04-26 02:15
閱讀 2311·2021-11-19 09:40
閱讀 1061·2021-10-27 14:13
閱讀 3328·2021-08-23 09:44
閱讀 3623·2019-12-27 12:24
閱讀 665·2019-08-30 15:53
閱讀 1180·2019-08-30 10:53
閱讀 2171·2019-08-26 12:14
