四、Fragment

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

import React from 'react';
const MyComponent = () => {
    return (
        <div>
            <div>我是组件1</div>
            <div>我是组件2</div>
            <div>我是组件3</div>
        </div>
    );
};
export default MyComponent;

解决方案：

1. 使用Fragment

   1. 创建一个根组件

      import React from 'react';
      const MyFragment = (props) => {
          return props.children;
      };
      export default MyFragment;

   2. 改造MyComponent组件

      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;

2. 使用幽灵标签改造

   import React from 'react';
   const MyComponent = () => {
       return (
           <>
               <div>我是组件1</div>
               <div>我是组件2</div>
               <div>我是组件3</div>
           </>
       );
   };
   export default MyComponent;