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

<Fragment>，通常通过 <>...</> 语法使用，允许你分组元素而无需包装节点。

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

参考
- <Fragment>
用法

参考

`<Fragment>`

在需要单个元素的情况下，用 <Fragment> 包裹元素以将其组合在一起。在 Fragment 中分组元素不会影响最终的 DOM；它与元素未分组的情况相同。空 JSX 标签 <></> 在大多数情况下是 <Fragment></Fragment> 的简写。

属性

可选 key：用显式 <Fragment> 语法声明的 Fragment 可能具有键。

注意事项

如果你想将 key 传递给 Fragment，你不能使用 <>...</> 语法。你必须显式地从 'react' 导入 Fragment 并渲染 <Fragment key={yourKey}>...</Fragment>。
当你从渲染 <><Child /></> 变为渲染 [<Child />] 或反过来，或者当你从渲染 <><Child /></> 变为渲染 <Child /> 或反过来时，React 不会重置状态。这仅适用于单层嵌套：例如，从 <><><Child /></></> 变为 <Child /> 会重置状态。查看精确的语义此处。

用法

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

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

Fragment 很有用，因为使用 Fragment 将元素分组不会影响布局或样式，这与将元素包装在另一个容器（如 DOM 元素）中不同。如果你使用浏览器工具检查此示例，你会看到所有 <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>
  );
}

通常情况下，你不需要这样做，除非你需要向你的 Fragment 传递一个 key。

将多个元素赋值给变量

像任何其他元素一样，你可以将 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>