React 中的 Fragment 标签

React 中的 Fragment 标签

介绍

React.Fragment组件能够在不额外创建 DOM 元素的情况下，让 render()方法中返回多个元素。

使用

代替div作为最外层，可做不可见的包裹元素。主要的作用就是避免了多层嵌套的div标签。

import react, { Component, Fragment } from 'react'
...
render() { 
    return ( 
      <Fragment>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
      </Fragment>  
    )
  }

上面这段代码等价于：

import react, { Component, Fragment } from 'react'
...
render() { 
    return ( 
      <>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
      </>  
    )
  }

注意

<Fragment>标签和<>标签的区别之处就是：
<>不能接受键值或属性，但是<Fragment>可以。可以用在遍历循环渲染元素的时候。

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`，React 会发出一个关键警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key 是唯一可以传递给 Fragment 的属性。未来可能会添加对其他属性的支持，例如事件。

注意：简写形式<></>，但目前有些前端工具支持的还不太好，用 create-react-app 创建的项目可能就不能通过编译。所以遇到这种情况很正常。