reactjs - 我的 ul className 函数调用缺少什么

Question

不确定我是否在 ul 列表类中使用了正确的函数。

export default () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="navbar">
      <div className="nav-center">
        <div className="nav-header">
          <Link to="/">
            <img src={logo} alt="Beach Resort" />
          </Link>
          <button
            type="button"
            className="nav-btn"
            onClick={() => setIsOpen({ isOpen: !isOpen })}
          >
            <FaAlignRight className="nav-icon" />
          </button>
        </div>
        <ul className={isOpen ? "nav-links show-nav" : "nav-links"}>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/rooms">Rooms</Link>
          </li>
        </ul>
      </div>
    </nav>
  );
};

我希望类名根据切换功能进行切换。

标签： reactjsfunctional-programmingcomponents

Answer 1

您不会像在类组件中那样设置对象，而是在使用钩子的情况下直接设置值

<button type="button" className='nav-btn' onClick={() => setIsOpen(!isOpen)}>