React组件自闭合标签调试：缺失闭合标签引发语法错误排查

问题描述 #

我花费了大量时间查找缺失的闭合标签，如今几近崩溃，整个组件持续抛出“Expression Expected”或“Declaration or statement expected”错误。我知道需要使用/>闭合标签，但无法定位具体问题位置。

原代码 #

import { useState } from "react";
import logo from "../icons/logo.svg";
import CSS from "../styles/Navigation.css";
import hamburger from "../icons/icon-hamburger.svg";
import { MobileMenu} from "../components/MobileMenu"


function navigation() {
  
  return (
    <div className="navigation">
        <img className="logo" src={logo} alt="coffee-roasters-logo" />

      <button className="hamburger">
        <img src={hamburger} />
        </button>

      <div className="navigation-menu">
        <ul>
          <li>
            <a href="#">Home</a>
          </li>

          <li>
            <a href="#">About Us</a>
          </li>

          <li>
            <a href="#">Create Your Plan</a>
          </li>
        </ul>
      </>
    </div>
  
  )
}

export default navigation;

错误定位与修复 #

1. 核心报错原因
   你把<div className="navigation-menu">的闭合标签写成了</>，这是无效的JSX语法，必须明确写为</div>，这就是引发标签相关报错的直接问题。

2. 额外优化项

   • React组件名要求首字母大写，把navigation改为Navigation，否则React会将其识别为原生HTML标签，引发潜在逻辑问题。
   • CSS导入无需赋值给变量，改为import "../styles/Navigation.css";即可正常生效。
   • 若暂时不需要MobileMenu组件，可以删除对应的导入语句，减少冗余代码。

修正后的完整代码 #

import { useState } from "react";
import logo from "../icons/logo.svg";
import "../styles/Navigation.css";
import hamburger from "../icons/icon-hamburger.svg";
// 若不需要MobileMenu可删除此行
import { MobileMenu } from "../components/MobileMenu"


function Navigation() {
  
  return (
    <div className="navigation">
        <img className="logo" src={logo} alt="coffee-roasters-logo" />

      <button className="hamburger">
        <img src={hamburger} alt="hamburger menu" />
      </button>

      <div className="navigation-menu">
        <ul>
          <li>
            <a href="#">Home</a>
          </li>

          <li>
            <a href="#">About Us</a>
          </li>

          <li>
            <a href="#">Create Your Plan</a>
          </li>
        </ul>
      </div>
    </div>
  
  )
}

export default Navigation;

内容的提问来源于stack exchange，提问作者Naomi Dzunic