react 中 Fragment 占位符

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值