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>
  );
}
相关推荐
Holin_浩霖几秒前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇几秒前
CSS属性继承与特殊值
前端·css
kevlin_coder4 分钟前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生6 分钟前
JS 性能优化
前端·javascript
我有一棵树12 分钟前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
浪裡遊15 分钟前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
用户8772447539619 分钟前
Lubanno7UniverSheet:开放底层能力,让你的表格需求 “不设限”
前端
张可爱25 分钟前
ES6奶茶铺版通俗笔记 🍵✨
前端
用户8772447539625 分钟前
Lubanno7UniverSheet:选择命令式,为了真正的跨框架通用
前端
Aoda31 分钟前
从痛点到落地:PawHaven 的 Monorepo 架构设计
前端·javascript