如何在 html 标签中使用 useState？答案

【问题标题】：how to use useState in an html tag?如何在 html 标签中使用 useState？
【发布时间】：2020-04-19 12:21:31
【问题描述】：

我需要将我的状态链接到一个 HTML 标记。我设法使用类来做到这一点，但现在使用钩子我没有得到它。出现错误。

React Hook "useState" 在函数 "navbar" 中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks。

代码：

  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}>
          <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>
    );
  }

【问题讨论】：

你在哪里打电话给handleClick？我有一个 GitHub 存储库，它展示了如何根据函数、类和样式组件中的单击事件切换类，请随意查看 - norbitrial/react-toogle-class-on-click

标签： javascript reactjs jsx

【解决方案1】：

您需要一个大写的首字母作为组件名称。

这就是您当前出现错误的原因。

export default function Navbar() {

【讨论】：