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

jsX 是 JavaScript XML 的缩写，是 的语法扩展，允许在 文件中编写类似 的代码。

在使用 *** X 时，初学者经常会遇到一个常见错误，即 “ *** X 表达式必须有一个父元素”。如果在一个表达式中返回多个元素，而没有用父元素包装，就会出现这种错误。

这个错误也与 “Adjacent *** X elements must be wrapped in an enclosing tag. Did you want a *** X fragment <>…</>?”  （相邻的 *** X 元素必须用外层标签封装）错误。

在本文中，您将了解在使用 React 时避免这种常见障碍的不同解决方案。

什么原因导致 “ *** X expressions must have one parent element” 错误？

在 *** X 中，有一条规则规定必须始终返回单个元素。这一规则也适用于 React，这意味着每个只能返回一个根元素。

这是因为在呈现组件时，React 会创建一个虚拟 DOM 树，该树与最终呈现到页面上的 HTML 相对应。如果 *** X 中有多个根元素，React 就不知道如何处理它们，从而导致 “ *** X expressions must have one parent element” 错误或 “Adjacent *** X elements must be wrapped in an enclosing tag. Did you want a *** X fragment <>…</>?”

例如，如果您尝试呈现以下 *** X 代码：

function App() {
return (
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
)
}

您会收到 “ *** X expressions must have one parent element” 的错误信息：

*** X 表达式必须有一个父元素错误

或 “Adjacent *** X elements must be wrapped in an enclosing tag. Did you want a *** X fragment <>…</>?” 错误：

Adjacent *** X elements must be wrapped in an enclosing tag. Did you want a *** X fragment <>…</>?

这是因为返回了两个根元素（ <h1> 和 <p> ）。

*** X 的操作类似于函数，因为函数不能返回多个值（除非它们被括入数组中，而数组被视为单个值）。

function myFunc() {
return value1;
return value2;
}

render 函数中的第二条返回语句无法执行，因为之一条返回语句会一直执行，导致第二条返回语句无法执行。

修复 “ *** X 表达式必须有一个父元素 “错误的 3 种 ***

修复此错误的 *** 主要有三种，分别是

• 使用 Div 包住
• 使用片段（<> 和 </>）
• 使用 React.Fragment 组件

1. 用 Div 包器包住所有元素

解决 “ *** X expressions must have one parent element” 错误的一个最直接的 *** 是将多个 *** X 元素封装在一个父元素中，如 <div>。

这样做可以将元素分组并作为一个单元呈现。例如，请看下面的组件：

function App() {
return (
<div>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</div>
)
}

在本例中， <h1> 和 <p> 元素被包裹在一个 <div> 元素中，该元素是父元素。

2. 用片段包住所有元素

解决 “ *** X expressions must have one parent element” 或 “Adjacent *** X elements must be wrapped in an enclosing tag. Did you want a *** X fragment <>…</>?” 错误的 *** 是使用 *** X 片段。

片段是 React 的一项内置功能，它允许您对子元素列表进行分组，而无需在 DOM 中添加额外的节点。您可以使用片段将多个元素封装在一个父元素中，而不会在渲染的 HTML 中添加额外的 DOM 节点。例如，下面是一个组件：

function App() {
return (
<>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</>
)
}

在本例中，使用了一个 *** X 片段（<> 和 </> ）来封装多个元素。该片段充当父元素。

3. 用 React.Fragment 封装所有元素

最后，解决 “ *** X expressions must have one parent element” 错误的另一种 *** 是使用 React.Fragment 组件而不是普通的元素。

这与使用 *** X 片段的效果类似，但它更明确一些，如果你想给父元素一个特定的键或其他道具，它可能会很有用。例如，下面是一个组件：

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 ，这在你想为片段中的元素组应用样式或其他属性时非常有用。

如何修复条件式中的 “ *** X expressions must have one parent element” 错误

在使用 React 中的三元运算符处理条件语句时，经常会遇到错误信息 “ *** X expressions must have one parent element” 或 “Adjacent *** X elements must be wrapped in an enclosing tag. Did you want a *** X 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>
)
}

小结

“ *** X expressions must have one parent element” 错误或 “Adjacent *** X elements must be wrapped in an enclosing tag. Did you want a *** X fragment <>…</>?” 这是初学者在学习 React 时经常遇到的障碍。

使用 <div> 封装器是最简单的解决方案，但它会在 DOM 中添加不必要的 div。片段提供了一种更简洁的解决方案，而不会在 DOM 中添加额外的节点。

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