跳到主要内容

Fragment

一、认识​

Fragment 为React中的包裹标签。同Vue中的Template

二、语法​

标准写法
return (
    <Fragment>
      {
        defaultSelected.length && menuRender()
      }
    </Fragment>
)

也可以简写为:

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

三、场景​

3.1 作为包裹层​

return (
    <Fragment>
      {
        defaultSelected.length && menuRender()
      }
    </Fragment>
)

四、问题​

4.1 React 中 <> 与 <Fragment> 有什么区别呢？​

在 React 中，<>...</> 是 <React.Fragment>...</React.Fragment> 的简写语法，两者基本功能相同，都用来包裹一组子元素而不向 DOM 中添加额外节点。不过两者也有一些细微区别: <React.Fragment>, 可以传入属性（例如 key）, 这在渲染列表时非常有用。简写语法 <>...</>：不支持任何属性，无法传入 key 或其他属性。

// 使用完整写法，允许添加 key 属性
const list = items.map(item => (
  <React.Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.description}</dd>
  </React.Fragment>
));

// 使用简写语法，仅适用于不需要属性时
const MyComponent = () => (
  <>
    <Header />
    <Content />
    <Footer />
  </>
);

总结来说，当你需要传递属性或 key 时，必须使用 <React.Fragment>, 否则，两者完全等效。