在 React 项目中,render 方法只能有一个根元素,一般都是 <div> <div/> ,然后在里面写上我们的组件,渲染到浏览器一看,除了我们想要显示的组件,外面还套着一层 div,如果在写项目的时候,套了很多曾组件,那么每一层都会多出来一个父级元素 div,不美观,而且在调整样式的时候会有些麻烦

因此,React 提供了一个占位符 Fragment,写法是:

// index.js

import React, { Component,Fragment } from 'react'

export default class index extends Component {
    render() {
        return (
            <Fragment>
                <h2>hello,wolrd</h2>
            </Fragment>
        )
    }
}

在引入 React 的时候,增加一个属性 Fragment,然后 render()方法下唯一的根元素我们用 <Fragment> </Fragment> 来代替,这时候再看浏览器,就不会显示多余的标签了,直接显示 <h2>标签