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

• 一. Fragments 标签基本使用
• 二. 带 key 的 Fragments
• 三. Fragments 标签 短语法

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

一. Fragments 标签基本使用

import React, { Component } from "react";
// 从 react 中引入 Fragment
import { Fragment } from "react";export default class index extends Component {render() {return (// );}
}

二. 带 key 的 Fragments

使用显式 语法声明的片段可能具有 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 (
{this.state.arr.map((v) => {return (v.id}>
{v.title},{v.text});})}
);}
}

三. Fragments 标签 短语法

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

import React, { Component } from "react";export default class index extends Component {render() {return (<>);}
}