如何在JSX中返回多個元素

如何解決必須從組件返回多個元素時JSX所具有的局限性

在React中編寫JSX時,有一個警告:您必須返回一個父項。不超過一個。

例如,這是不可能的:

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

解決此問題的一種“經典”方法是將組件和其他HTML元素包裝在div

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

但是,這帶來了一個問題-引入了一個HTML元素只是為了使我們的JSX工作,而在生成的HTML中不是必需的,但這就是它的結局。

一種解決方案是返回JSX元素數組:

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

另一個解決方案是使用Fragment,這是一個相對較新的React功能,可以為我們解決問題:

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

它像div我們之前添加的元素,但不會出現在呈現給瀏覽器的HTML結果中。雙贏。

免費下載我的反應手冊


更多反應教程: