React - Fragment 使用（代替外层div标签，页面不显的标签）

1. React 一个组件通常需要返回多个元素，React要求这些元素外层必须包裹一个标签，普遍的做法是使用<div>标签包裹。
2. 使用 div 标签包裹会产生多余的标签嵌套，如果想要去除这些不必要的包裹标签，可以使用<React.Fragment>标签代替div标签进行包裹。
3. Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

一. Fragments 标签基本使用

import React, { Component } from "react";
// 从 react 中引入 Fragment
import { Fragment } from "react";

export default class index extends Component {
  render() {
    return (
      // <React.Fragment></React.Fragment>
      <Fragment>
        <input type="text" />
        <input type="text" />
      </Fragment>
    );
  }
}

二. 带 key 的 Fragments

使用显式 <React.Fragment> 语法声明的片段可能具有 key。
key 是唯一可以传递给 Fragment 的属性。

import React, { Component } from "react";
// 从 react 中引入 Fragment
import { Fragment } from "react";

export default class index extends Component {
  state = {
    arr: [
      { id: 1, title: "目录一", text: "内容一" },
      { id: 2, title: "目录二", text: "内容二" },
    ],
  };
  render() {
    return (
      <div>
        {this.state.arr.map((v) => {
          return (
            <Fragment key={v.id}>
              <div>
                {v.title},{v.text}
              </div>
            </Fragment>
          );
        })}
      </div>
    );
  }
}

三. Fragments 标签 短语法

可以使用一种新的，且更简短的语法来声明 Fragments。它看起来像空标签：<></>
短语法不支持 key 或属性

import React, { Component } from "react";

export default class index extends Component {
  render() {
    return (
      <>
        <input type="text" />
        <input type="text" />
      </>
    );
  }
}