Fragment

在React中，JSX必须有且只有一个根元素。这就导致了在有些情况下我们不得不在子元素的外部添加一个额外的父元素，像是这样：

import React from 'react';

const MyComponent = () => {
    return (
        <div>
            <div>我是组件1</div>
            <div>我是组件2</div>
            <div>我是组件3</div>
        </div>
    );
};

export default MyComponent;

上边这段代码中，组件内部需要引入三个组件（使用三个div表示）。由于是三个组件，根据JSX的语法必须在三个组件的外部在套一个div，三个组件才能够正常使用，但是这个外层的div在最终的页面中没有任何的实质性作用。

遇到这种情况我们就非常希望能有一种方式可以引入多个组件，但又不会在最终的网页中添加多余的结构，那么我们可以定义这样一个组件：

import React from 'react';

const MyFragment = (props) => {
    return props.children;
};

export default MyFragment;

MyFragment这个组件非常简单，它会直接返回当前组件内部的所有子元素，不会产生新的元素，可以将上边组件中的外层div，修改为MyFragmet：

import React from 'react';
import MyFragment from "./MyFragment";

const MyComponent = () => {
    return (
        <MyFragment>
            <div>我是组件1</div>
            <div>我是组件2</div>
            <div>我是组件3</div>
        </MyFragment>
    );
};

export default MyComponent;

这样一来，网页中就不会出现多余的div了。

实际上在React中已经为我们提供好了一个现成的组件帮助我们完成这个工作，这个组件可以通过React.Fragment使用，上述案例，也可以修改成这样：

import React from 'react';

const MyComponent = () => {
    return (
        <React.Fragment>
            <div>我是组件1</div>
            <div>我是组件2</div>
            <div>我是组件3</div>
        </React.Fragment>
    );
};

export default MyComponent;

也可以修改引入React的方式，直接使用Fragment：

import React, {Fragment} from 'react';

const MyComponent = () => {
    return (
        <Fragment>
            <div>我是组件1</div>
            <div>我是组件2</div>
            <div>我是组件3</div>
        </Fragment>
    );
};

export default MyComponent;

不过最爽的是，在React中为我们提供了一种更加便捷的方式，直接使用<></>代替Fragment更加简单：

import React from 'react';

const MyComponent = () => {
    return (
        <>
            <div>我是组件1</div>
            <div>我是组件2</div>
            <div>我是组件3</div>
        </>
    );
};

export default MyComponent;