分析错误：相邻JSX元素必须被包裹在一个封闭的标签

在React编写前端应用时，如果我们在JSX中出现相邻的元素，则会出现 Adjacent JSX elements must be wrapped in an enclosing tag 错误。这个错误通常是由于JSX中的多个组件未被封闭在单个标签中而导致的。

为什么会出现这个错误？

React要求在返回的JSX中只能有一个根元素，也就是说，所有的元素必须被封装在一个根元素内。如果您有两个或更多的元素位于同一级别，则必须将它们封装在一个容器元素（如 <div> 标签）中。

例如，下面这段代码会触发该错误：

const App = () => {
  return (
    <h1>Hello World!</h1>
    <p>Welcome to my website.</p>
  );
};

因为 <h1> 和 <p> 元素不被封闭在单个标签内。

如何解决这个错误？

为了避免这个错误，我们需要确保我们的JSX在返回之前只有一个根元素。一种方法是将所有的元素封装在一个容器元素中，如下所示：

const App = () => {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>Welcome to my website.</p>
    </div>
  );
};

这样 <h1> 和 <p> 元素就被封装在一个 <div> 标签中，解决了该错误。

如果您不想使用无意义的 <div> 标签，还可以使用 React.Fragment 来创建一个虚拟的容器元素。例如：

const App = () => {
  return (
    <>
      <h1>Hello World!</h1>
      <p>Welcome to my website.</p>
    </>
  );
};

这里的 <> 和 </> 就是 React.Fragment 的简写形式。

总结

在React编写前端应用时，如果我们遇到了 Adjacent JSX elements must be wrapped in an enclosing tag 错误，那么我们需要确保所有的元素都被封装在一个根元素中。我们可以使用 <div> 或 React.Fragment 等标记来完成这个任务。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8963