相邻的 JSX 元素必须包含在封闭标记中

在使用 JSX 编写 React 组件时，我们需要注意一个问题：相邻的 JSX 元素必须包含在封闭标记中。否则，在编译时会出现语法错误。

问题

考虑以下代码：

import React from 'react';

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

在运行时，会抛出以下错误：

SyntaxError: adjacent JSX elements must be wrapped in an enclosing tag

这是因为两个 JSX 元素不在封闭标记中。

解决方法

要解决这个问题，有两种方法可以选择：使用一个父元素包含这两个元素或使用片段（fragment）。

使用一个父元素包含这两个元素

在这种解决方案中，我们使用一个 div 或其他父元素来包含这两个元素。

import React from 'react';

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

这样，两个 JSX 元素就位于同一个封闭标记中。

使用片段

在这种解决方案中，我们使用片段来包含这两个元素。片段是一种特殊的元素，用于表示一个没有标签的容器。

import React from 'react';

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

这样，两个 JSX 元素就可以在一个封闭标记内使用了。

总结

编写 React 组件时，需要注意相邻的 JSX 元素必须包含在封闭标记中。如果没有包含，会导致编译器出现语法错误。为了解决这个问题，我们可以使用一个父元素包含这两个元素，或者使用片段来包含这两个元素。