<> 與 React.Fragment 的區(qū)別

<>React.Fragment 的簡寫標(biāo)簽拦盹。它允許我們對元素列表進(jìn)行分組淤刃,而無需將它們包裝到新節(jié)點中栽燕。

建議:基本上,我們應(yīng)該在任何時候使用 React.Fragment<>台盯,它可以避免不必要的 div 包裝器,得到一個更加清晰的標(biāo)簽結(jié)構(gòu)畏线。

所以我們可以這樣做:

return (
  <>
    <Header />
    <Navigation />
    <Main />
    <Footer />
  </>
)

它們之間唯一的區(qū)別是簡寫版本不支持 key 屬性静盅。

以下是在多行字符串中插入新行(br)標(biāo)簽的常見示例:

{
  str.split('\\n').map((item, index) => {
    return (
      <Fragment key={index}>
        {item}
        <br />
      </Fragment>
    )
  })
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市寝殴,隨后出現(xiàn)的幾起案子蒿叠,更是在濱河造成了極大的恐慌,老刑警劉巖杯矩,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件栈虚,死亡現(xiàn)場離奇詭異,居然都是意外死亡史隆,警方通過查閱死者的電腦和手機魂务,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人粘姜,你說我怎么就攤上這事鬓照。” “怎么了孤紧?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵豺裆,是天一觀的道長。 經(jīng)常有香客問我号显,道長臭猜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任押蚤,我火速辦了婚禮蔑歌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘揽碘。我一直安慰自己次屠,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布雳刺。 她就那樣靜靜地躺著劫灶,像睡著了一般。 火紅的嫁衣襯著肌膚如雪掖桦。 梳的紋絲不亂的頭發(fā)上本昏,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天,我揣著相機與錄音枪汪,去河邊找鬼凛俱。 笑死,一個胖子當(dāng)著我的面吹牛料饥,可吹牛的內(nèi)容都是我干的蒲犬。 我是一名探鬼主播,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼岸啡,長吁一口氣:“原來是場噩夢啊……” “哼原叮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起巡蘸,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤奋隶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后悦荒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體唯欣,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年搬味,在試婚紗的時候發(fā)現(xiàn)自己被綠了境氢。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蟀拷。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖萍聊,靈堂內(nèi)的尸體忽然破棺而出问芬,到底是詐尸還是另有隱情,我是刑警寧澤寿桨,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布此衅,位于F島的核電站,受9級特大地震影響亭螟,放射性物質(zhì)發(fā)生泄漏挡鞍。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一预烙、第九天 我趴在偏房一處隱蔽的房頂上張望匕累。 院中可真熱鬧,春花似錦默伍、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至羡宙,卻和暖如春狸剃,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背狗热。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工钞馁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人匿刮。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓僧凰,卻偏偏與公主長得像,于是被迫代替她去往敵國和親熟丸。 傳聞我的和親對象是個殘疾皇子训措,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,925評論 2 344

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

  • React 中的一個常見模式是一個組件返回多個元素灯蝴。Fragments 允許你將子列表分組芹啥,而無需向 DOM 添加...
    越前君閱讀 1,978評論 0 3
  • Fragment 組件能夠在不額外創(chuàng)建 DOM 元素的情況下,讓 render() 方法中返回多個元素凡简。 一個常見...
    生命里那束光閱讀 214評論 0 3
  • 1. 什么是React纱兑? React是一個開源前端JavaScript庫呀闻,用于構(gòu)建用戶界面,尤其是單頁面應(yīng)用程序潜慎。...
    Yana_Lin閱讀 490評論 1 0
  • React-1 課程內(nèi)容 React 是什么捡多? 一個用于構(gòu)建用戶界面的 JavaScript 庫 命令式編程 和 ...
    lucky_yao閱讀 492評論 0 1
  • 學(xué)習(xí)來源 B站尚硅谷的課程 react 概述 用于構(gòu)建用戶界面的js庫 react庫的組成 核心庫:react.j...
    squidbrother閱讀 811評論 0 0