我的 ul className 函数调用缺少什么答案

【问题标题】：What am I missing with my ul className function call我的 ul className 函数调用缺少什么
【发布时间】：2019-08-26 19:06:51
【问题描述】：

不确定我是否在 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>
  );
};

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

【问题讨论】：

您最初将 isOpen 设置为布尔值，然后将其设置为对象 if({isOpen:anyting}) 始终为 true。您可以像这样切换 isOpen：onClick={() => setIsOpen(!isOpen)}

标签： reactjs functional-programming components

【解决方案1】：

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

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

【讨论】：