reactjs - React : vs 数组

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
}

我认为它们是相同的。

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

<小时/>

编辑:

如果有任何不明确的地方，请告诉我。

具体来说:

请解释一下 <ReturnArray /> 之间的区别和<ReturnFragments /> 。它们都返回多个元素而没有无用<div>标签。为什么要费心使用额外的 <React.Fragment />部分？

Answer 1

Official document说

Using array notation has has some confusing differences from normal JSX:

1. Children in an array must be separated by commas.

2. Children in an array must have a key to prevent React’s key warning.

3. Strings must be wrapped in quotes.

为了简单起见，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.
        </>
      );
    }