前端教程:React之Fragments组件语法片段的使用

React开发中常见的模式之一是将多个元素返回一个组件,Fragments允许您聚合一个子元素列表,并且不会在DOM中添加额外的节点。会Vue的朋友当然会发现,它看起来和Vue的template非常相似,都可以用来表示一个空节点。但这和Vue的temlate还是有一点不同的,我们都知道,Vue的组件template内的子级只有一个节点,而react的Fragments子级可以有多个节点,因此这两者的区别也是正式的。

为什么使用Fragments?

首先,先来看一个示例。

//Columnsclass Columns extends React.Component {  render() { return (   <div>
  <td>Hello</td>
  <td>World</td>
   </div>
 );
  }
}//Tableclass Table extends React.Component {  render() { return (   <table>
  <tr>
 <Columns />
  </tr>
   </table>
 );
  }
}123456789101112131415161718192021222324复制代码类型:[javascript]

可以看到,在table组件tr中,渲染了Columns组件,而最终的输出是这样的。

<table>
  <tr>
 <div>
   <td>Hello</td>
   <td>World</td>
 </div>
  </tr>
</table>12345678复制代码类型:[python]

根据上方输出结构可以看到,tr下面多了一个div,造成了dom结构出现了非法嵌套,最终HTML将会是无效的。而这并不是我们想要的,所以Fragments的出现就是为了解决这样的问题。

如何使用Fragments?

我们就上方的示例进行更改

//Columnsclass Columns extends React.Component {  render() { return (   <React.Fragment>
  <td>Hello</td>
  <td>World</td>
   </React.Fragment>
 );
  }
}//Tableclass Table extends React.Component {  render() { return (   <table>
  <tr>
 <Columns />
  </tr>
   </table>
 );
  }
}123456789101112131415161718192021222324复制代码类型:[javascript]

最终输出

<table>  <tr>
 <td>Hello</td>
 <td>World</td>
  </tr></table>123456复制代码类型:[javascript]

如果你觉得上方语法还是比较麻烦,不用着急,jsx提供了一个简写语法,示例如下:

//Columnsclass Columns extends React.Component {  render() { return (   <>
  <td>Hello</td>
  <td>World</td>
   </>
 );
  }
}1234567891011复制代码类型:[javascript]

你可以像使用其他元素一样使用<></>,不过它不支持键值或属性。

请注意,目前许多工具都不支持这个简写语法,所以你可能需要明确地使用<React.Fragment>,直到工具支持这个语法。

带key的Fragments

function Glossary (props) {  return ( <dl>
   {props.items.map(item => (
  // 没有`key`,将会触发一个key警告  <React.Fragment key={item.id}>
 <dt>{item.term}</dt>
 <dd>{item.description}</dd>
  </React.Fragment>
   ))} </dl>
  );
}12345678910111213复制代码类型:[javascript]

key是唯一可以传递给Fragment的属性。未来,可能增加额外的属性支持,比如事件处理等。

(0)

相关推荐

  • 前端教程:JavaScript语法

    JavaScript由被放置在<script>...</script>的JavaScript语句,在网页中的HTML标签. 可以将<script>包含您的JavaS ...

  • 前端教程——JavaScript函数中重构If/Else语句的方法

    无论使用何种编程语言,代码都需要根据不同的情况对给定的输入做出不同的决定并执行相应的操作.举例来说,在游戏中,如果玩家的生命值是0,游戏就结束了.在气象应用程序中,如果观看早晨的日出,就会看到一张照片 ...

  • 解读在React中使用JSX语法

    JSX是JavaScript的一种语法扩展,被应用到React体系结构中,它的格式与模板语言类似,但实际上完全在JavaScript内部实现.组成React应用程序的元素最小单元,JSX用于声明Rea ...

  • 前端教程:Django创建视图

    视图功能,或简称"view",是一个简单的Python函数,它接受一个Web请求,并返回一个Web响应.此响应可以是Web页的HTML内容,或重定向,或404错误,或XML文档,或 ...

  • 前端教程:DjangoURL映射

    现在,我们有一个工作视图在前面的章节中解释.我们希望通过一个URL来访问该视图. Django有他自己 URL映射的方式,现在我们来编辑项目中的 url.py 文件(myproject/url.py) ...

  • 前端教程:Django模型

    创建模型 下面是创建一个 Dreamreal 模型实例 − from django.db import models class Dreamreal(models.Model): website = ...

  • 前端教程:Django模板系统

    Django能够单独分开Python和HTML,Python代码/变量进入视图和HTML模板. 连接这两个,Django依赖于渲染函数和Django模板语言. 渲染函数 这个函数有三个参数 − 请求− ...

  • 前端教程:Django通用视图

    在某些情况下编写视图代码,正如我们所看到前面工作真的很繁重.想象一下,只需要一个静态页面或列表页. Django还提供了一种简单的方法来设置这些简单的视图被称为通用视图. 不同于传统的视图,一般的视图 ...

  • 前端教程:DjangoApache配置

    到目前为止,在我们的例子中,都是使用 Django 开发的web服务器.但这种服务器只是用于测试和不适合生产环境.一旦程序发布投入生产,就需要如Apache,Nginx等一个真正的服务器,我们在这一节 ...