时间戳

首页 > 解决方案 > 如何在 html 标签中使用 useState？

javascript - 如何在 html 标签中使用 useState？

问题描述

我需要将我的状态链接到 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>
    );
  }

标签： javascriptreactjsjsx

解决方案

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

这就是您当前遇到的错误的原因。

export default function Navbar() {

推荐阅读