Fragment

当返回多个组件，并且不需要有额外的组件或者元素包裹的时候，可以使用。

使用方法

示例：

  export default class extends React.PureComponent {
    render() {
      return (
        <React.Fragment>
          <div>
            <label>姓名：</label> <input />
          </div>
          <div>
            <label>年龄：</label> <input />
          </div>
        </React.Fragment>
      );
    }
  }

在线示例

Keyed Fragments

示例：

  function Glossary(props) {
    return (
      <dl>
        {props.items.map(item => (
          // Without the `key`, React will fire a key warning
          <React.Fragment key={item.id}>
            <dt>{item.term}</dt>
            <dd>{item.description}</dd>
          </React.Fragment>
        ))}
      </dl>
    );
  }

短语法

可以使用<></>来代替<React.Fragment></React.Fragment>;

注意用一些工具可能不支持该语法