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

<Fragment>，通常通过 <>...</> 语法使用，允许你在没有封装器节点的情况下对元素进行分组。

¥<Fragment>, often used via <>...</> syntax, lets you group elements without a wrapper node.

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

参考

¥Reference

`<Fragment>`

在需要单个元素的情况下，将 <Fragment> 中的元素封装在一起以将它们组合在一起。Fragment 中的分组元素对生成的 DOM 没有影响；就好像元素没有分组一样。在大多数情况下，空的 JSX 标签 <></> 是 <Fragment></Fragment> 的简写。

¥Wrap elements in <Fragment> to group them together in situations where you need a single element. Grouping elements in Fragment has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag <></> is shorthand for <Fragment></Fragment> in most cases.

属性

¥Props

可选 key：使用显式 <Fragment> 语法声明的片段可以具有键。

¥optional key: Fragments declared with the explicit <Fragment> syntax may have keys.

注意事项

¥Caveats

如果要将 key 传递给 Fragment，则不能使用 <>...</> 语法。你必须明确地从 'react' 导入 Fragment 并渲染 <Fragment key={yourKey}>...</Fragment>。

¥If you want to pass key to a Fragment, you can’t use the <>...</> syntax. You have to explicitly import Fragment from 'react' and render <Fragment key={yourKey}>...</Fragment>.
当你从渲染 <><Child /></> 到 [<Child />] 或返回时，或者当你从渲染 <><Child /></> 到 <Child /> 并返回时，React 不会重置状态。这仅适用于单层深度：例如，从 <><><Child /></></> 到 <Child /> 会重置状态。在此处查看精确语义。

¥React does not reset state when you go from rendering <><Child /></> to [<Child />] or back, or when you go from rendering <><Child /></> to <Child /> and back. This only works a single level deep: for example, going from <><><Child /></></> to <Child /> resets the state. See the precise semantics here.

用法

¥Usage

返回多个元素

¥Returning multiple elements

使用 Fragment 或等效的 <>...</> 语法将多个元素组合在一起。你可以使用它将多个元素放在单个元素可以到达的任何地方。例如，一个组件只能返回一个元素，但通过使用 Fragment，你可以将多个元素组合在一起，然后将它们作为一个组返回：

¥Use Fragment, or the equivalent <>...</> syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:

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

Fragments 很有用，因为使用 Fragment 对元素进行分组对布局或样式没有影响，这与将元素封装在另一个容器中（如 DOM 元素）不同。如果你使用浏览器工具检查此示例，你会看到所有 <h1> 和 <article> DOM 节点都显示为没有封装器的兄弟节点：

¥Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you’ll see that all <h1> and <article> DOM nodes appear as siblings without wrappers around them:

复刻

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？

¥How to write a Fragment without the special syntax?

上面的例子相当于从 React 导入 Fragment：

¥The example above is equivalent to importing Fragment from React:

import { Fragment } from 'react';

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

通常你不需要这个，除非你需要将 key 传递给你的 Fragment。

¥Usually you won’t need this unless you need to pass a key to your Fragment.

将多个元素分配给变量

¥Assigning multiple elements to a variable

与任何其他元素一样，你可以将 Fragment 元素分配给变量，将它们作为属性传递，以此类推：

¥Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:

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

对使用文本的元素进行分组

¥Grouping elements with text

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

¥You can use Fragment to group text together with components:

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

渲染 Fragment 列表

¥Rendering a list of Fragments

在这种情况下，你需要显式编写 Fragment 而不是使用 <></> 语法。当你在循环中渲染多个元素的时候，你需要给每个元素分配一个 key。如果循环中的元素是 Fragment，则需要使用普通的 JSX 元素语法来提供 key 属性：

¥Here’s a situation where you need to write Fragment explicitly instead of using the <></> syntax. When you render multiple elements in a loop, you need to assign a key to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the key attribute:

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

你可以检查 DOM 以验证 Fragment 子元素周围没有封装元素：

¥You can inspect the DOM to verify that there are no wrapper elements around the Fragment children:

复刻

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>