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

开课吧开课吧锤锤2021-07-15 14:05

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

React之Fragments组件语法片段的使用

为什么使用Fragments?  

首先,先来看一个示例。

//Columns
class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

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

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

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

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

如何使用Fragments?  

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

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

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

最终输出  

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

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

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

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

请注意,目前许多工具都不支持这个简写语法,所以你可能需要明确地使用<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>
  );
}

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

以上内容由开课吧小编为大家整理发布的“前端教程:React之Fragments组件语法片段的使用”一文,更多Web教程相关内容尽在开课吧广场Web教程频道。  

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营