<Fragment> (<>...</>)

<Fragment> 通常使用 <>...</> 語法，讓您可以在沒有包裝器節點的情況下將元素分組。

<>
  <OneChild />
  <AnotherChild />
</>

參考
- <Fragment>
用法

參考

`<Fragment>`

將元素包在 <Fragment> 中，以便在您需要單個元素的情況下將它們組合在一起。在 Fragment 中組合元素不會影響產生的 DOM；這與不組合元素相同。在多數情況下，空的 JSX 標籤 <></> 是 <Fragment></Fragment> 的簡寫。

屬性

選用 key：使用明確的 <Fragment> 語法宣告的 Fragment 可以有 keys。

注意事項

如果您想將 key 傳遞給 Fragment，則不能使用 <>...</> 語法。您必須從 'react' 顯式導入 Fragment 並且渲染 <Fragment key={yourKey}>...</Fragment>。
當您從渲染 `<><Child /></> 切換到 [<Child />] 或反向切換，或者當您從渲染 <><Child /></> 切換到 <Child /> 或反向切換時，React 並不會重設狀態。這僅在單一層級深度有效：例如，從 <><><Child /></></> 切換到 <Child /> 就會重設狀態。確切的語義請參見這裡。

用法

返回多個元素

使用 Fragment 或等效的 <>...</> 語法，將多個元素組合在一起。您可以使用它將多個元素放在任何可以放置單個元素的地方。例如，一個組件只能返回一個元素，但透過使用 Fragment，您可以將多個元素組合在一起，然後將它們作為一個群組返回。

function Post() {
  return (
    <>
      <PostTitle />
      <PostBody />
    </>
  );
}

Fragment 很有用，因為與將元素包裝在另一個容器（如 DOM 元素）中不同，使用 Fragment 對元素進行分組不會影響佈局或樣式。如果您使用瀏覽器工具檢查此範例，您會看到所有 <h1> 和 <article> DOM 節點都以兄弟節點的形式出現，而沒有任何包裝器。

Fork

export default function Blog() {
  return (
    <>
      <Post title="An update" body="It's been a while since I posted..." />
      <Post title="My new blog" body="I am starting a new blog!" />
    </>
  )
}

function Post({ title, body }) {
  return (
    <>
      <PostTitle title={title} />
      <PostBody body={body} />
    </>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}

深入探討

如何在沒有特殊語法的情況下編寫 Fragment？

上面的例子等同於從 React 導入 Fragment。

import { Fragment } from 'react';

function Post() {
  return (
    <Fragment>
      <PostTitle />
      <PostBody />
    </Fragment>
  );
}

通常您不需要這樣做，除非您需要將 key 傳遞給您的 Fragment。

將多個元素賦值給變數

像任何其他元素一樣，您可以將 Fragment 元素賦值給變數、將它們作為 props 傳遞，等等。

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

將元素與文字分組

您可以使用 Fragment 將文字與組件組合在一起。

function DateRangePicker({ start, end }) {
  return (
    <>
      From
      <DatePicker date={start} />
      to
      <DatePicker date={end} />
    </>
  );
}

渲染 Fragment 列表

以下情況下，您需要明確編寫 Fragment，而不是使用 <></> 語法。當您在迴圈中渲染多個元素時，您需要為每個元素分配一個 key。如果迴圈中的元素是 Fragment，則您需要使用普通的 JSX 元素語法來提供 key 屬性。

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

您可以檢查 DOM 以驗證 Fragment 子元素周圍沒有包裝器元素。

Fork

import { Fragment } from 'react';

const posts = [
  { id: 1, title: 'An update', body: "It's been a while since I posted..." },
  { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
];

export default function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}

上一頁元件

下一頁<Profiler>