如何在HTML标签中绑定useState状态？类转Hook遇组件规范报错求助

嘿，这问题我熟！你遇到的报错核心原因其实很简单——React函数组件的名称必须以大写字母开头，你的组件名是小写的navbar，React把它当成了普通JavaScript函数，而不是React组件，所以Hook规则就触发了报错。另外代码里还有个小笔误需要修正，我给你一步步理清楚：

错误原因拆解 #

• React的Hook规则明确要求：Hook只能在**React函数组件（大写开头）或者自定义Hook（以use开头）**中调用。你的navbar是小写开头，React不认为它是组件，所以禁止你在这里用useState。
• 代码里的und是未定义的变量，应该替换成undefined或者空字符串''，不然会导致另一个报错。
• 别忘了导入useState！你的代码里没写导入语句，这也是会报错的点。

修改后的完整代码 #

import { useState } from 'react'; // 必须导入useState

export default function Navbar() { // 组件名大写开头
  const [isOpen, setIsOpen] = useState(false);
  
  const handleClick = () => {
    setIsOpen(!isOpen);
  };

  return (
    <nav>
      <div className="logoBtn">
        <div className="logo">
          <a href="#"><h1>Logo</h1></a>
        </div>
        <div className="btn" onClick={handleClick}>
          <div className="bar"></div>
          <div className="bar"></div>
          <div className="bar"></div>
        </div>
      </div>
      <ul className={isOpen ? 'showNav' : ''}> {/* 把und换成空字符串，或者undefined */}
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  );
}

关键修改点总结 #

• 将组件函数名从navbar改为Navbar（大写首字母），这是让React识别它为组件的关键。
• 添加import { useState } from 'react';语句，确保Hook能被正确使用。
• 把und替换成''（空字符串），这样当isOpen为false时，ul元素没有额外的类名，符合常规写法。

这样修改后，你的组件就能正常使用useState来管理导航栏的展开/收起状态啦！

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