Fragments

在React中要求render函数返回值只能是一个标签,简单方式是通过在最外层包裹一个div来实现,而有时候div不能满足要求,React允许使用Fragments组件来作为最外层的包裹层,它只是一个包裹,最终渲染时不会影响整体的HTML结构。
使用形式:

<></>
<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>
    );
  }
}

最终结果

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一. 动机 以下的例子简洁清晰的反映了fragments的作用,在生产过程中,经常会遇到这种情况:首先,是在Tab...
    zewweb阅读 4,247评论 0 0
  • 嵌套Fragment的使用及常见错误 嵌套Fragments (Nested Fragments), 是在Frag...
    圣骑士wind阅读 11,665评论 0 24
  • 在传统的企业模式中,很多企业已深陷深井病的困扰。什么是深井病呢?就是在每一个部门下面管辖的人当中啊,他们只听从部门...
    马二郎阅读 7,332评论 0 1
  • 青灯古佛霜卧窗,冷秋黄,银烛旁。桃花半里,绣巾掩剑芒。敬酒沙场烛泪藏,许来世,岁月长。梦回山野似故乡,双鬓苍,面色...
    柳小门阅读 1,135评论 0 0
  • <一> 其实我们未必算的上是朋友,你知道其实我们常常挂在嘴边的一些词都是泛泛。我的这些朋友常年在中关村地铁与公司之...
    啪嚏阅读 3,904评论 8 5

友情链接更多精彩内容