开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

概念

Fragment一种标签，不额外创建 DOM 元素，适用于列表结构进行分组渲染

使用

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

返回多个元素

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

多个元素赋值到一个变量

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

key 是唯一可以传递给 Fragment 的属性

function Glossary(props) {
  return (
    <dl>
      {props.items.map((item) => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

注意

<><Child /></> === [<Child />] === <Child /> 不会重置 state

<> </> 无法接受 key 值

原理

为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹

JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来