跳到主要内容

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

<Fragment> 通常使用 <>...</> 代替，它们都允许你在不添加额外节点的情况下将子元素组合。

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

参考​

  • 当你需要单个元素时，你可以使用 <Fragment> 将其他元素组合起来，使用 <Fragment> 组合后的元素不会对 DOM 产生影响，就像元素没有被组合一样。
  • 在大多数情况下，<Fragment></Fragment> 可以简写为空的 JSX 元素 <></> 。

参数​

  • 可选 key：列表中 <Fragment> 的可以拥有 keys。

注意事项​

  • 如果你要传递 key 给一个 <Fragment>，你不能使用 <>...</>，你必须从 'react' 中导入 Fragment 且表示为<Fragment key={yourKey}>...</Fragment>。

  • 当你要从 <><Child /></> 转换为 [<Child />] 或 <><Child /></> 转换为 <Child />，React 并不会重置 state。

  • 这个规则只在一层深度的情况下生效，如果从 <><><Child /></></> 转换为 <Child /> 则会重置 state 。在这里查看更详细的介绍。