Fragments

在React中要求render函數(shù)返回值只能是一個標(biāo)簽,簡單方式是通過在最外層包裹一個div來實(shí)現(xiàn),而有時候div不能滿足要求,React允許使用Fragments組件來作為最外層的包裹層,它只是一個包裹,最終渲染時不會影響整體的HTML結(jié)構(gòu)。
使用形式:

<></>
<React.Fragment>
</React.Fragment>

<></>是<React.Fragment/>的語法糖,但是不允許任何屬性輸入,所以如果是需要帶屬性的Fragments只能使用第二種方式
例:

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}
class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}
class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

最終結(jié)果

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一. 動機(jī) 以下的例子簡潔清晰的反映了fragments的作用,在生產(chǎn)過程中,經(jīng)常會遇到這種情況:首先,是在Tab...
    zewweb閱讀 895評論 0 0
  • 嵌套Fragment的使用及常見錯誤 嵌套Fragments (Nested Fragments), 是在Frag...
    圣騎士wind閱讀 6,775評論 0 24
  • 在傳統(tǒng)的企業(yè)模式中,很多企業(yè)已深陷深井病的困擾。什么是深井病呢?就是在每一個部門下面管轄的人當(dāng)中啊,他們只聽從部門...
    馬二郎閱讀 2,647評論 0 1
  • 青燈古佛霜臥窗,冷秋黃,銀燭旁。桃花半里,繡巾掩劍芒。敬酒沙場燭淚藏,許來世,歲月長。夢回山野似故鄉(xiāng),雙鬢蒼,面色...
    柳小門閱讀 133評論 0 0
  • <一> 其實(shí)我們未必算的上是朋友,你知道其實(shí)我們常常掛在嘴邊的一些詞都是泛泛。我的這些朋友常年在中關(guān)村地鐵與公司之...
    啪嚏閱讀 727評論 8 5

友情鏈接更多精彩內(nèi)容