React导入DishesContainer后编译报错：App.tsx JSX闭合标签语法错误

直接触发报错的问题点 #

你的App.tsx代码有两个硬伤，直接导致编译失败：

• 完全漏写了DishesContainer的开标签：在<Header>内容结束后，你直接放了</ DishesContainer>闭合标签，JSX是严格的成对标签结构，没有开标签的闭合标签是完全非法的，这是触发“缺少闭合标签”报错的核心原因
• 闭合标签写法违规：就算补了DishesContainer的开标签，</ DishesContainer>里尖括号和标签名之间多余的空格，也会让解析器认不出这是合法的JSX标签

正确的修复操作 #

1. 先补全缺失的组件导入：你目前只导入了DishesContainer，代码里用的Header组件如果没写对应的导入语句，等语法问题修完之后还会报组件未定义的错
2. 按照JSX的标签规则调整结构：如果DishesContainer不需要嵌套子内容，直接用自闭合写法就行，不用单独写闭合标签

修复后可正常编译的App.tsx代码 #

function App() {
  return (
    <div className="App">
      <Header id="header" inverted as='h1'>Dishes Project</Header>
      <DishesContainer />
    </div>
  );
}

export default App;

实用排查小技巧 #

• JSX对标签格式的要求很严：尖括号和标签名之间不能加任何空格，自闭合标签的标准格式是<组件名 />，斜杠和组件名之间要留单个空格
• 碰到这类语法报错不用全局逐行翻找，代码编辑器会直接用波浪线标红有问题的位置，顺着提示找比手动搜索效率高很多

内容的提问来源于stack exchange，提问作者Ron Futsal