JSX基本語法

1.XML基本語法

使用類似于XML語法的基本好處是可以任意嵌套,可以很清楚的看到DOM樹狀結構及其屬性

const List=()=>(
 <div>
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
   </ul>
</div>
)

注意點是:

只允許被一個標簽包裹住
標簽一定要閉合

2.元素類型:

JSX中HTML標簽的小寫字母對應DOM元素浸卦,但是組件元素要對應大寫字母

組件的命名要以大寫字母為主

注釋

注釋的方法是{/* 節(jié)點注釋 */}

const App = (  
                     <Nav>  
                     {/* 節(jié)點注釋*/}  
                    <Person   
                     /* 多行         注釋*/   
                     name={window.isLoggedIn ? window.name : ''}    />
                    </Nav>);
                           );

3.元素屬性

JSX不同于DOM元素屬性的是**class和for**胡野,所以轉換如下:
  -class屬性改為className
  -for屬性改為htmlFor

所以example如下:

const Header=({title,children})=>(
<h3 title={title}>{children}</h3>
)
調用的時候為
<Header title="hello world">Hello world</Header>

展開屬性

const component=<Component name={name} value={value}/>

4.js屬性表達式

屬性值 必須使用表達式州刽,用{}來替換

const App = (  <Nav> 
                    {/* 節(jié)點注釋*/} 
                     <Person      /* 多行         注釋*/     
                   name={window.isLoggedIn ? window.name : ''}    /> 
                   </Nav>);
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末迎献,一起剝皮案震驚了整個濱河市绢慢,隨后出現(xiàn)的幾起案子只嚣,更是在濱河造成了極大的恐慌沮稚,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件册舞,死亡現(xiàn)場離奇詭異蕴掏,居然都是意外死亡,警方通過查閱死者的電腦和手機调鲸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進店門盛杰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人藐石,你說我怎么就攤上這事即供。” “怎么了于微?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵逗嫡,是天一觀的道長。 經(jīng)常有香客問我株依,道長驱证,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任恋腕,我火速辦了婚禮抹锄,結果婚禮上,老公的妹妹穿的比我還像新娘吗坚。我一直安慰自己祈远,他們只是感情好,可當我...
    茶點故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布商源。 她就那樣靜靜地躺著,像睡著了一般谋减。 火紅的嫁衣襯著肌膚如雪牡彻。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天,我揣著相機與錄音庄吼,去河邊找鬼缎除。 笑死,一個胖子當著我的面吹牛总寻,可吹牛的內容都是我干的器罐。 我是一名探鬼主播,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼渐行,長吁一口氣:“原來是場噩夢啊……” “哼轰坊!你這毒婦竟也來了?” 一聲冷哼從身側響起祟印,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤肴沫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蕴忆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體颤芬,經(jīng)...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年套鹅,在試婚紗的時候發(fā)現(xiàn)自己被綠了站蝠。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,115評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡卓鹿,死狀恐怖菱魔,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情减牺,我是刑警寧澤豌习,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站拔疚,受9級特大地震影響肥隆,放射性物質發(fā)生泄漏。R本人自食惡果不足惜稚失,卻給世界環(huán)境...
    茶點故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一栋艳、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧句各,春花似錦吸占、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至初厚,卻和暖如春件蚕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工排作, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留牵啦,地道東北人。 一個月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓妄痪,卻偏偏與公主長得像哈雏,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子衫生,可洞房花燭夜當晚...
    茶點故事閱讀 45,055評論 2 355

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理裳瘪,服務發(fā)現(xiàn),斷路器障簿,智...
    卡卡羅2017閱讀 134,665評論 18 139
  • ??DOM(文檔對象模型)是針對 HTML 和 XML 文檔的一個 API(應用程序編程接口)站故。 ??DOM 描繪...
    霜天曉閱讀 3,649評論 0 7
  • 今天又臨摹了飛樂鳥的水彩教程皆怕,只不過呢,像昨天一樣西篓,我是用自己的方式來上色和畫線稿愈腾。 雖然有很多地方?jīng)]畫好,我還...
    夏那閱讀 478評論 2 1
  • 腳下的樹葉被風吹得團團轉 我不知道風要將它帶到哪里去 它努力的掙扎一下 最終還是隨風而去 攬山...
    qxl然閱讀 170評論 0 1
  • 前篇一律:你好 岂津,我叫……這樣沒什么意思 可以比如你好虱黄,我叫白林,我小名就在我的大名中吮成,你猜猜之類的 DHV:在你...
    CNBLUEone閱讀 247評論 0 0