jsx語法

JSX 是 javascript 的語法擴(kuò)展。它就像一個擁有 javascript 全部功能的模板語言蔗坯。它生成 React 元素琼稻,這些元素將在 DOM 中呈現(xiàn)。

React 建議在組件使用 JSX商膊。在 JSX 中伏伐,我們結(jié)合了 javascript 和 HTML,并生成了可以在 DOM 中呈現(xiàn)的 react 元素晕拆。

1. 定義虛擬 dom 時不要用引號

2.標(biāo)簽中引入 js 表達(dá)式要用 {}

3.如果在 jsx 要寫行內(nèi)樣式需要使用 style={{coler:red}} 形式

4.樣式的類名指定不能寫 class藐翎,要寫 className;

5.只有一個根標(biāo)簽

6.標(biāo)簽必須閉合

7.標(biāo)簽首字母

①若小寫字母開頭,則會將該標(biāo)簽轉(zhuǎn)為 html 同名標(biāo)簽,如果沒找到吝镣,則會報錯堤器;

②若大寫字母開頭,則會認(rèn)為是組件赤惊,它就會去找對應(yīng)的組件吼旧,如果沒找到,就會報組件未定義的錯誤未舟;

實(shí)質(zhì):JSX 通過 babel 編譯圈暗,而 babel 實(shí)際上把 JSX 編譯給 React.createElement() 調(diào)用

React.createElement()即 h 函數(shù),返回 vnode第一個參數(shù)可能是組件也可能是

html —tag 裕膀,如果是組件员串,首字母必須大寫

const imgElem = <div>

? ? <p>some text</p>

? ? <img src={imgUrl} /> </div>

? ? // 經(jīng)過 babel 編譯后

? ? var imgElem = React. createElement ("div",null,React.createElement("p",null,"some text"),React.createElement("img",{src:imgUrl}));

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市昼扛,隨后出現(xiàn)的幾起案子寸齐,更是在濱河造成了極大的恐慌,老刑警劉巖抄谐,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件渺鹦,死亡現(xiàn)場離奇詭異,居然都是意外死亡蛹含,警方通過查閱死者的電腦和手機(jī)毅厚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來浦箱,“玉大人吸耿,你說我怎么就攤上這事】峥” “怎么了咽安?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蓬推。 經(jīng)常有香客問我妆棒,道長,這世上最難降的妖魔是什么拳氢? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任募逞,我火速辦了婚禮,結(jié)果婚禮上馋评,老公的妹妹穿的比我還像新娘。我一直安慰自己刺啦,他們只是感情好留特,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般蜕青。 火紅的嫁衣襯著肌膚如雪苟蹈。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天右核,我揣著相機(jī)與錄音慧脱,去河邊找鬼。 笑死贺喝,一個胖子當(dāng)著我的面吹牛菱鸥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播躏鱼,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼氮采,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了染苛?” 一聲冷哼從身側(cè)響起鹊漠,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎茶行,沒想到半個月后躯概,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡畔师,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年娶靡,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片茉唉。...
    茶點(diǎn)故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡固蛾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出度陆,到底是詐尸還是另有隱情艾凯,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布懂傀,位于F島的核電站趾诗,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蹬蚁。R本人自食惡果不足惜恃泪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望犀斋。 院中可真熱鬧贝乎,春花似錦、人聲如沸叽粹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至锤灿,卻和暖如春挽拔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背但校。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工螃诅, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人状囱。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓术裸,卻偏偏與公主長得像,于是被迫代替她去往敵國和親浪箭。 傳聞我的和親對象是個殘疾皇子穗椅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 005@關(guān)于JSX語法 轉(zhuǎn)(有所更改):React入門:關(guān)于JSX語法可以參考的資料:React.js學(xué)習(xí)筆記之J...
    驀然之間的閱讀 906評論 0 0
  • 在前文中:React - 功能介紹、安裝配置說明(附幾個簡單的入門樣例)奶栖,我演示了如何使用 ReactJS 進(jìn)行頁...
    前端小華子閱讀 922評論 0 1
  • 借鑒:原著 JSX語法匹表,像是在Javascript代碼里直接寫XML的語法,實(shí)質(zhì)上這只是一個語法糖宣鄙,每一個XML標(biāo)...
    星空夢想閱讀 646評論 0 0
  • virtual DOM 真實(shí)頁面對應(yīng)一個DOM樹袍镀。在傳統(tǒng)頁面的開發(fā)模式中,每一次需要更新頁面的時候冻晤,都需要手動操作...
    kim_jin閱讀 2,064評論 0 1
  • JSX是React的核心組成部分苇羡,它使用XML標(biāo)記的方式去直接聲明界面,界面組件之間可以互相嵌套鼻弧∩杞可以理解為在JS...
    可樂愛上咖啡閱讀 71,944評論 1 64