如何解決 JSX 在組件中返回多個元素的限制

在編寫 React 中的 JSX 時,有一個重要注意事項:你必須返回一個父元素,而不是多個元素。

例如,這樣是不可能的:

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

解決這個問題的一種傳統方式是將組件和其他 HTML 元素包裹在一個 <div> 中:

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

然而,這引入了一個問題 - 我們只是為了使 JSX 工作而引入了一個不必要的 HTML 元素,但在最終的 HTML 中並不需要。

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

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

還有一種解決方案是使用 Fragment,這是一個相對較新的 React 功能,為我們解決了這個問題:

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

它的工作原理類似於我們之前添加的 div 元素,但它不會在瀏覽器呈現的最終 HTML 中出現。 解決兩全其美。