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

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

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

这个错误也与 “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment …

在本文中，您将了解在使用 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 (
Hello, world!
This is a paragraph.
)
}

您会收到 “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 …

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

和

）。

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

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

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

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

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

使用 Div 包住
使用片段（和
使用 React.Fragment 组件

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

解决 “JSX expressions must have one parent element” 错误的一个最直接的方法是将多个 JSX 元素封装在一个父元素中，如

。

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

function App() {
return (

Hello, world!
This is a paragraph.

)
}

在本例中，

和

元素被包裹在一个

元素中，该元素是父元素。

2. 用片段包住所有元素

解决 “JSX expressions must have one parent element” 或 “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment …

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

function App() {
return (

Hello, world!
This is a paragraph.

在本例中，使用了一个 JSX 片段（ 和 
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 中的三元运算符处理条件语句时，经常会遇到错误信息 “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 (

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

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

 元素。
function App() {
return (

{condition ? (

Heading 1
Paragraph 1

Heading 2
Paragraph 2

)
}
小结
“JSX expressions must have one parent element” 错误或 “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment …
使用 

 封装器是最简单的解决方案，但它会在 DOM 中添加不必要的 div。片段提供了一种更简洁的解决方案，而不会在 DOM 中添加额外的节点。
现在轮到你了： 您遇到过这个问题吗？你是如何解决的？你还使用过本文未涉及的其他方法吗？请在评论中告诉我们！
                    
        © 版权声明



    
    
    免责声明 - wpwpp.com
    


    
        免责声明
        
            本站文章均为原创，除非另有说明，否则本站内容依据 CC BY-NC-SA 4.0 许可证进行授权，转载请附上出处链接及本声明，谢谢。
            本站提供的资源（插件或主题）均为网上搜集，如有涉及或侵害到您的版权，请立即通过邮箱 admin@wpwpp.com 通知我们。
            本站所有下载文件，仅用作学习研究使用，下载后请在 24小时内 删除。请支持正版，切勿用作商业用途。
            因代码可变性，本站不保证兼容所有浏览器、不保证兼容所有版本的 WordPress，不保证兼容您安装的其他插件。
            本站保证所提供资源（插件或主题）的完整性，但不含授权许可、帮助文档、XML文件、PSD、后续升级等。
            使用该资源（插件或主题）需要用户有一定代码基础知识！本站只提供汉化及安装教程，仅供参考。由本站提供的资源对您的网站或计算机造成严重后果的，本站概不负责。
            有时可能会遇到部分字段无法汉化，同时请保留作者汉化宣传信息，谢谢！
            本站资源售价只是赞助和汉化辛苦费，收取费用仅维持本站的日常运营所需。
            如果您喜欢本站资源，开通会员享受更多优惠折扣，谢谢支持！
            如果网盘地址失效，请在相应资源页面下留言，我们会尽快修复下载地址。
            本站网址：wpwpp.com，联系邮箱：admin@wpwpp.com。
        
    

THE END
编程开发
    
    喜欢就支持一下吧
点赞20
        分享QQ空间微博QQ好友海报分享复制链接收藏