如何在JSX中返回多个元素

如何解决JSX在从一个组件返回多个元素时的限制问题

在React中编写JJSX时，有一个注意事项：你必须返回一个父项。不能多于一个。

例如，这是不可能的。

const Pets = () => {
  return (
    <Dog />
    <Cat />
  )
}

解决这个问题的一个 "经典 "方法是将组件和其他HTML元素包裹在一个div 。

const Pets = () => {
  return (
    <div>
      <Dog />
      <Cat />
    </div>
  )
}

然而这引入了一个问题--有一个HTML元素的引入只是为了让我们的JSX工作，在产生的HTML中不是必须的，但这是它的终点。

一个解决方案是返回一个JJSX元素的数组。

const Pets = () => {
  return [
      <Dog />,
      <Cat />
  ]
}

另一个解决方案是使用Fragment，一个相对较新的React功能，为我们解决了这个问题。

const Pets = () => {
  return (
    <Fragment>
      <Dog />
      <Cat />
    </Fragment>
  )
}

它的工作原理和我们之前添加的div 元素一样，但它不会出现在渲染给浏览器的HTML结果中。双赢。