React 之 内置标签<Fragment> (<>...</>) (十一)

通常使用 <>...</> 代替,它们都允许你在不添加额外节点的情况下将子元素组合。相当于vue的内置标签<template/>

1. 返回多个元素

javascript 复制代码
<>
  <OneChild />
  <AnotherChild />
</>

2. 分配多个元素给一个变量

和其他元素一样,你可以将 Fragment 元素分配给变量,作为 props 传递。

javascript 复制代码
function CloseDialog() {
  const buttons = (
    <>
      <OKButton />
      <CancelButton />
    </>
  );
  return (
    <AlertDialog buttons={buttons}>
      Are you sure you want to leave this page?
    </AlertDialog>
  );
}

3. 组合文本与组件

可以使用 Fragment 将文本与组件组合在一起。

javascript 复制代码
function DateRangePicker({ start, end }) {
  return (
    <>
      From
      <DatePicker date={start} />
      to
      <DatePicker date={end} />
    </>
  );
}

4. 渲染 Fragment 列表

需要为每一个元素分配一个 key时,需要显式地表示为 Fragment,而不是使用简写语法 <></>

javascript 复制代码
function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}
相关推荐
因吹斯汀几秒前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡5 分钟前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧5 分钟前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼7 分钟前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学4623825 分钟前
TypeORM 列装饰器完整总结
前端·后端·nestjs
冰冷的bin27 分钟前
【React Native】点赞特效动画组件FlowLikeView
react native·react.js·typescript
彭于晏爱编程28 分钟前
你真的了解 Map、Set 嘛
前端
崔璨32 分钟前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv32 分钟前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒43 分钟前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端