如何在React中修复 “JSX表达式必须有一个父元素” 的问题

WBOLT_COM 11 月 02, 2023 603 0

jsx-expressions-must-have-one-parent-element-1024x512-1

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 中添加额外的节点。

现在轮到你了：您遇到过这个问题吗？你是如何解决的？你还使用过本文未涉及的其他方法吗？请在评论中告诉我们！

评论收藏点赞