JSX 是 JavaScript XML 的缩写，是 React 的语法扩展，允许开发人员在 JavaScript 文件中编写类似 HTML 的代码。

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

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

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

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

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

function App() {
return (
Hello, world!
This is a paragraph.
)
}

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

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

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

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

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

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

修复 “JSX 表达式必须有一个父元素 “错误的 3 种方法

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

• 使用 Div 包住
• 使用 React.Fragment 组件

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

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

function App() {
return (

Hello, world!
This is a paragraph.

)
}

在本例中， 和 元素被包裹在一个 元素中，该元素是父元素。

2. 用片段包住所有元素

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

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

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

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

function App() {
return (

Hello, world!
This is a paragraph.

)
}

在本例中，使用了 React.Fragment 组件而不是普通的

元素作为父元素。它将多个元素包装在标签内，这样就可以将元素组合在一起，而无需在渲染的 HTML 中添加额外的节点。

使用 React.Fragment 组件需要导入 React。它还允许你为片段本身添加道具、 className, style,和 id ，这在你想为片段中的元素组应用样式或其他属性时非常有用。

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

当在条件语句中返回多个元素时，就会出现这种情况。在这种情况下，React 无法正确呈现这些元素，因此会出现上述错误。

function App() {
return (

{condition ? (
Heading 1
Paragraph 1
) : (
Heading 2
Paragraph 2
)}

)
}

您可以使用本文介绍的三种方法中的任何一种来修复此错误。最好使用 React 片段 ( 和 ) 或  元素。

小结

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

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

原文地址：https://www.wbolt.com/jsx-expressions-must-have-one-parent-element.html