react 中 Fragment 占位符

在 react 脚手架创建的项目中 public 文件夹默认有一个 root 根节点，最后完成的代码都会放到 <div id="root"></div> 节点中，无论是在函数组件的 return 中还是类组件的 render() 中的 JSX 语法必须有一个标签包裹，使用 div 标签会在页面中正式的插入这个标签，可能会在某些情况下形成困扰，所以 react 提供另外一个占位符 Fragment 。使用时只需要包裹在 JSX 语法的最外层即可，记得先导入

使用

导入

import { Fragment } from 'react'

使用

function App() {
  return (
    <Fragment>
      <h1>hello react</h1>
    </Fragment>
  );
}

export default App;

效果在这里插入图片描述

再看看不使用 Fragment 的结构

不使用

function App() {
  return (
    <div>
      <h1>hello react</h1>
    </div>
  );
}

export default App;

效果在这里插入图片描述

会看到多了一层 div 标签