React.Fragment

1、作用：包裹一组子节点，但不返回本身的节点

2、例：返回子组件里多个 <td> 节点
父：

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

子：

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

结合好，父组件的 table 里的子标签是这样的：

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

<div> 原本是子组件的最外一层（render 的 return 只能返回一个标签，而不能是多个），但到了父组件后，却是多余的标签，这时候通过 fragment 来去掉它。

• 在子组件中用 Fragment 标签代替 div 标签

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>

也就是说，Fragment 标签的作用是作为顶级标签来包裹子标签，并且编译后消失。

注意：<React.Fragment> 只支持 key 属性，如：

 <div>
      {arr.map(item => (
        // 没有设置 key 属性的话，react 会报警告
        <React.Fragment key={item.id}>
          <p>{item.name}</p>
        </React.Fragment>
      ))}
    </div>

• 简写
  用 <> 代替 <React.Fragment>

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

注意：简写不支持添加 key 和 属性 attributes

参考：https://reactjs.org/docs/fragments.html#motivation

---

欢迎关注公众号：gh_042070ae6d0a ，每周分享前端干货和生活感悟！
（完）