/

如何在JSX中返回多個元素

如何在JSX中返回多個元素

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

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

例如，這樣是不可能的：

1
2
3
4
5
6
const Pets = () => {
 return (
 <Dog />
 <Cat />
 )
}

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

1
2
3
4
5
6
7
8
const Pets = () => {
 return (
 <div>
 <Dog />
 <Cat />
 </div>
 )
}

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

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

1
2
3
4
5
6
const Pets = () => {
 return [
 <Dog />,
 <Cat />
 ]
}

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

1
2
3
4
5
6
7
8
const Pets = () => {
 return (
 <Fragment>
 <Dog />
 <Cat />
 </Fragment>
 )
}

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

tags: [“react”, “jsx”, “fragment”]