解决 JSX 元素缺少闭合标签错误：理解 React/JSX 语法规范

本文详细解析了 react/jsx 开发中常见的“jsx element ‘x’ has no corresponding closing tag”错误。通过对比错误与正确的 jsx 语法，强调了带内容元素必须使用 `内容` 的完整开闭标签结构，并区分了自闭合标签的适用场景。教程还提供了如何有效解读编译器错误信息，以提升开发效率和代码质量的实用建议。

在 React 应用开发中，JSX 作为 JavaScript 的语法扩展，允许我们在 JavaScript 代码中编写类似 HTML 的结构。然而，JSX 语法有着严格的规范，其中最基础也是最容易出错的一点就是元素的开闭标签匹配。当编译器抛出“JSX element ‘div’ has no corresponding closing tag.”这样的错误时，通常意味着某个 JSX 元素的闭合方式不符合其预期。

理解 JSX 元素闭合规则

JSX 元素根据其是否包含内容或子元素，分为两种基本的闭合形式：

带内容的元素（Content-bearing Elements）如果一个 JSX 元素包含文本、其他 JSX 元素或任何子内容，它必须使用一个完整的开标签和闭标签对。开标签形如 ，闭标签形如 。

正确示例：

这是一个包含内容的 div 元素
  这是一个嵌套的 span 元素

自闭合元素（Self-closing Elements）如果一个 JSX 元素不包含任何子元素或内容，它可以（也应该）使用自闭合标签的形式。这种标签在开标签的末尾加上一个斜杠 /，形如 。HTML 中常见的自闭合标签有 、、
等。在 React 中，不接受 children prop 的自定义组件也常使用自闭合形式。

正确示例：

@@##@@ {/* 假设 MyComponent 不接受 children */}

解析“JSX element ‘div’ has no corresponding closing tag.”错误

这个错误通常发生在开发者试图以自闭合的形式来闭合一个预期包含内容的 JSX 元素时。例如，以下代码片段展示了一个典型的错误场景：

错误示例代码：

return (  
      {isPending && 
Loading...
} {/* 错误：此处应为 
 */}      {blogs && }  
);

在这个例子中，

return (  
      {isPending && 
Loading...
} {/* 更正：使用正确的闭标签 
 */}      {blogs && }