如何解決 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 中出現。 解決兩全其美。