Question

我正在阅读React文档，并对主题Fragments感到困惑。由于我们基本上可以在React中返回一个数组，因此在什么情况下需要<Fragements />？

这是一个代码示例：

const ReturnArray = () => {
  const items = [
    <div key={1}>Item 1</div>,
    <div key={2}>Item 2</div>,
    <div key={3}>Item 3</div>,
  ]
  return items
}

const ReturnFragments = () => {
  const items = 
    <React.Fragment>
      <div key={1}>Item 1</div>
      <div key={2}>Item 2</div>
      <div key={3}>Item 3</div>
    </React.Fragment>

  return items
}

我认为它们是相同的。

大多数现有主题都在github上谈论诸如this之类的“关键警告问题”，但是我只想知道<Fragments />的用例

编辑：

请告诉我是否有任何歧义。

具体来说：

请说明<ReturnArray />和<ReturnFragments />之间的区别。它们都返回多个元素而没有无用的<div>标签。为什么还要使用多余的<React.Fragment />部分呢？

Answer 1

在return语句中使用Fragments而不是array有两个主要优点

与其他组件类似的简化语法，因此您不必担心返回逗号分隔的值，将字符串用引号引起来等
片段可以带有诸如键之类的属性，当您从地图中返回数据时，这些属性通常很重要。您无法使用数组来做到这一点。

示例

const ReturnFragments = () => {
  const items = list.map((item) => {
    <React.Fragment key={item.id}>
      <div key={1}>Item 1</div>
      <div key={2}>Item 2</div>
      <div key={3}>Item 3</div>
    </React.Fragment>
   })
  return items
}

Answer 2

Official document说

使用数组表示法与普通方法有一些令人困惑的区别   JSX：



数组中的子项必须用逗号分隔。



数组中的子代必须具有密钥，以防止React发出密钥警告。



字符串必须用引号引起来。

为简单起见，React提供了Fragment组件，可以代替数组使用。

考虑如何使用数组包装多个子对象

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}

以及如何使用片段来实现。

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

直接取自官方文件。

Answer 3

创建新组件时，render方法仅需要返回一个元素，因此通常是许多元素的包装，您可以使用fragment组件代替为dom创建无用的div。

React Fragments文档引用：

React中的常见模式是组件返回多个元素。片段使您可以将子级列表分组，而无需在DOM中添加额外的节点。

没有碎片

    render() {
      return {
       <div> ---> Useless root
          <div>fake</div>
          <div>fake</div>
          <div>fake</div>
       </div>
     }
}

有碎片

  render() {
      return {
       <React.Fragment> ----> Not rendered to the DOM
          <div>fake</div>
          <div>fake</div>
          <div>fake</div>
       </React.Fragment>
     }
   }

Answer 4

片段和数组旨在解决不同的用例，并以一种重要的方式表现不同。

如果省略key属性，片段将不会发出警告，而数组会警告。

如果您的组件返回了几个静态子代，请返回一个片段。

<Fragment>
  <li>One advantage of our product is lorem</li>
  <li>Another is ipsum!</li>
</Fragment>

如果您的组件返回动态生成的子代，请返回数组。

items.map(item => <li key={item}>{item}</li>);

我想解释维护者对我在React仓库中打开的一个类似问题的回答。我强烈建议您阅读以获取更多详细信息：https://github.com/facebook/react/issues/12776

反应：<react.fragment>与数组

4 个答案: