反应： vs数组

小编典典

反应： vs数组

reactjs

我正在阅读React文档，并对主题Fragment感到困惑。因为我们基本上可以在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上，但我只是想知道的用例<Fragments />

编辑：

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

再具体一点：

请解释之间的差异<ReturnArray />和<ReturnFragments />。它们都返回多个无用<div>标签的元素。为什么要花多余的<React.Fragment />钱呢？

阅读 224

2020-07-22

共1个答案

小编典典

官方文件说

使用数组表示法与普通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>
  );
}

直接取自官方文件。

片段也可以如下编写。

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

2020-07-22