八、Fragment

（一） src/Out.js

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

（二） src/App.js

import React from "react";
// import { Out } from "./Out";

export default function App() {
  return (
    // 默认必须有一个根标签
    // <div>
    //   <div>组件1</div>
    //   <div>组件2</div>
    //   <div>组件3</div>
    // </div>

    // 方法一：自定义无内容组件包裹
    // <Out>
    //   <div>组件1</div>
    //   <div>组件2</div>
    //   <div>组件3</div>
    // </Out>

    // 方法二：使用React定义的无内容组件包裹
    // 是一个专门用来作父容器的组件，只会将标签体直接返回，不会创建多余元素
    // <React.Fragment>
    //   <div>组件1</div>
    //   <div>组件2</div>
    //   <div>组件3</div>
    // </React.Fragment>

    // 方法三：Fragment语法糖
    <>
      <div>组件1</div>
      <div>组件2</div>
      <div>组件3</div>
    </>
  );
}