在React编写前端应用时，如果我们在JSX中出现相邻的元素，则会出现 Adjacent JSX elements must be wrapped in an enclosing tag 错误。这个错误通常是由于JSX中的多个组件未被封闭在单个标签中而导致的。
为什么会出现这个错误？
React要求在返回的JSX中只能有一个根元素，也就是说，所有的元素必须被封装在一个根元素内。如果您有两个或更多的元素位于同一级别，则必须将它们封装在一个容器元素（如 <div> 标签）中。
例如，下面这段代码会触发该错误：
----- --- - -- -- -
------ -
--------- -----------
---------- -- -- ------------
--
--因为 <h1> 和 <p> 元素不被封闭在单个标签内。
如何解决这个错误？
为了避免这个错误，我们需要确保我们的JSX在返回之前只有一个根元素。一种方法是将所有的元素封装在一个容器元素中，如下所示：
----- --- - -- -- -
------ -
-----
--------- -----------
---------- -- -- ------------
------
--
--这样 <h1> 和 <p> 元素就被封装在一个 <div> 标签中，解决了该错误。
如果您不想使用无意义的 <div> 标签，还可以使用 React.Fragment 来创建一个虚拟的容器元素。例如：
----- --- - -- -- -
------ -
--
--------- -----------
---------- -- -- ------------
---
--
--这里的 <> 和 </> 就是 React.Fragment 的简写形式。
总结
在React编写前端应用时，如果我们遇到了 Adjacent JSX elements must be wrapped in an enclosing tag 错误，那么我们需要确保所有的元素都被封装在一个根元素中。我们可以使用 <div> 或 React.Fragment 等标记来完成这个任务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8963