react 中 Fragment 占位符

新时代农民工Top

于 2021-11-24 10:01:59 发布

阅读量788

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/web00_11/article/details/121508402

react 专栏收录该内容

12 篇文章

订阅专栏

在React应用中，为了避免不必要的DOM元素嵌套，可以使用Fragment占位符。Fragment允许我们在JSX中返回多个元素而不需要额外的包裹标签。本文介绍了如何导入并使用Fragment，对比了使用和不使用Fragment时的代码效果，展示了其在简化代码结构中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 标签