JSX 是 JavaScript XML 的縮寫，是 React 的語法擴充套件，允許開發人員在 JavaScript 檔案中編寫類似 HTML 的程式碼。
在使用 JSX 時，初學者經常會遇到一個常見錯誤，即 “JSX 表示式必須有一個父元素”。如果在一個表示式中返回多個元素，而沒有用父元素包裝，就會出現這種錯誤。
這個錯誤也與 “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” （相鄰的 JSX 元素必須用外層標籤封裝）錯誤。
在本文中，您將瞭解在使用 React 時避免這種常見障礙的不同解決方案。
什麼原因導致 “JSX expressions must have one parent element” 錯誤？
在 JSX 中，有一條規則規定必須始終返回單個元素。這一規則也適用於 React，這意味著每個元件只能返回一個根元素。
這是因為在呈現元件時，React 會建立一個虛擬 DOM 樹，該樹與最終呈現到頁面上的 HTML 相對應。如果 JSX 中有多個根元素，React 就不知道如何處理它們，從而導致 “JSX expressions must have one parent element” 錯誤或 “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?”
例如，如果您嘗試呈現以下 JSX 程式碼：
function App() {
return (
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
)
}
您會收到 “JSX expressions must have one parent element” 的錯誤資訊：
JSX 表示式必須有一個父元素錯誤
或 “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” 錯誤：
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?
這是因為返回了兩個根元素（ <h1> 和 <p> ）。
JSX 的操作類似於函式，因為函式不能返回多個值（除非它們被括入陣列中，而陣列被視為單個值）。
function myFunc() {
return value1;
return value2;
}
render 函式中的第二條返回語句無法執行，因為第一條返回語句會一直執行，導致第二條返回語句無法執行。
修復 “JSX 表示式必須有一個父元素 “錯誤的 3 種方法
修復此錯誤的方法主要有三種，分別是
- 使用 Div 包住
- 使用片段（<> 和 </>）
- 使用 React.Fragment 元件
1. 用 Div 包器包住所有元素
解決 “JSX expressions must have one parent element” 錯誤的一個最直接的方法是將多個 JSX 元素封裝在一個父元素中，如 <div>。
這樣做可以將元素分組並作為一個單元呈現。例如，請看下面的元件：
function App() {
return (
<div>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</div>
)
}
在本例中， <h1> 和 <p> 元素被包裹在一個 <div> 元素中，該元素是父元素。
2. 用片段包住所有元素
解決 “JSX expressions must have one parent element” 或 “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” 錯誤的方法是使用 JSX 片段。
片段是 React 的一項內建功能，它允許您對子元素列表進行分組，而無需在 DOM 中新增額外的節點。您可以使用片段將多個元素封裝在一個父元素中，而不會在渲染的 HTML 中新增額外的 DOM 節點。例如，下面是一個元件：
function App() {
return (
<>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</>
)
}
在本例中，使用了一個 JSX 片段（<> 和 </> ）來封裝多個元素。該片段充當父元素。
3. 用 React.Fragment 封裝所有元素
最後，解決 “JSX expressions must have one parent element” 錯誤的另一種方法是使用 React.Fragment 元件而不是普通的元素。
這與使用 JSX 片段的效果類似，但它更明確一些，如果你想給父元素一個特定的鍵或其他道具，它可能會很有用。例如，下面是一個元件：
function App() {
return (
<React.Fragment>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</React.Fragment>
)
}
在本例中，使用了 React.Fragment 元件而不是普通的
元素作為父元素。它將多個元素包裝在標籤內，這樣就可以將元素組合在一起，而無需在渲染的 HTML 中新增額外的節點。
使用 React.Fragment 元件需要匯入 React。它還允許你為片段本身新增道具、 className, style,和 id ，這在你想為片段中的元素組應用樣式或其他屬性時非常有用。
如何修復條件式中的 “JSX expressions must have one parent element” 錯誤
在使用 React 中的三元運算子處理條件語句時，經常會遇到錯誤資訊 “JSX expressions must have one parent element” 或 “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?”。
當在條件語句中返回多個元素時，就會出現這種情況。在這種情況下，React 無法正確呈現這些元素，因此會出現上述錯誤。
function App() {
return (
<div>
{condition ? (
<h1>Heading 1</h1>
<p>Paragraph 1</p>
) : (
<h2>Heading 2</h2>
<p>Paragraph 2</p>
)}
</div>
)
}
您可以使用本文介紹的三種方法中的任何一種來修復此錯誤。最好使用 React 片段 (<> 和 </>) 或 <div> 元素。
function App() {
return (
<div>
{condition ? (
<>
<h1>Heading 1</h1>
<p>Paragraph 1</p>
</>
) : (
<>
<h2>Heading 2</h2>
<p>Paragraph 2</p>
</>
)
}
</div>
)
}
小結
“JSX expressions must have one parent element” 錯誤或 “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” 這是初學者在學習 React 時經常遇到的障礙。
使用 <div> 封裝器是最簡單的解決方案，但它會在 DOM 中新增不必要的 div。片段提供了一種更簡潔的解決方案，而不會在 DOM 中新增額外的節點。
現在輪到你了： 您遇到過這個問題嗎？你是如何解決的？你還使用過本文未涉及的其他方法嗎？請在評論中告訴我們！
評論留言