React State Hook - 切换一个类答案

【问题标题】：React State Hook - toggle a classReact State Hook - 切换一个类
【发布时间】：2019-04-11 01:00:14
【问题描述】：

我正在尝试构建一个侧边栏导航菜单，并认为我会利用 React 中新的 State hook。我已经阅读了文档，但似乎找不到与我需要的示例类似的示例，这很简单，可以在单击时切换 CSS 类，然后依次打开和关闭我的菜单。

这是我尝试过的：

const SidebarMenuItem = ({ component }) => {
  const [ menuActive, setMenuState ] = useState(false);

  return (
    <li className="p-sidebar-menu-item">
      menuActive:
      { menuActive }
      <button className="p-sidebar-menu-item__link" onClick={() => setMenuState(!menuActive)}>{ component.component }</button>
      { component.children && (
        <ul className="p-sidebar-menu">
          <li><a href={`/${component.slug}`}>Overview</a></li>
          { component.children.map((subPage, key) => (
            <li key={ key }>
              <a href={`/${subPage.slug}`}>{ subPage.name }</a>
            </li>
          ))}
        </ul>
      )}
    </li>
  )
}

export default SidebarMenuItem;

任何想法我哪里出错了？

谢谢

【问题讨论】：

您在哪里使用menuActive 更改/切换代码中的元素/css，我在代码中看不到，您已经显示。创建了working example，menuActive 得到正确更新检查一次。
CSS class on click which will in turn open and close my menu. 这是如何工作的？您应该在哪里打开和关闭课程？什么课？

标签： reactjs react-hooks

【解决方案1】：

只需让 className 动态化，而不是设置

<li className="p-sidebar-menu-item">

将其转换为模板文字

<li className={`p-sidebar-menu-item`}>

然后有条件地添加你的类（在我的例子中是“黄色”类）

<li className={`p-sidebar-menu-item ${menuActive ? "yellow" : ""}`}>

看看这个CodeSandbox：这里我刚刚添加了你的组件并更改了className属性的生成方式。

如果您想避免使用三元运算符，您可以使用classnames module，然后将您的代码更新为

import c from "classnames";
...
...
...
<li className={c("p-sidebar-menu-item", {yellow: menuActive})}>

另一种干净的解决方案可以是提前生成className字符串，例如

let classes = "p-sidebar-menu-item";
if(menuActive) {
  classes += " yellow";
}
<li className={classes}>

如果您需要更多帮助，请告诉我 ?

【讨论】：

非常感谢。这成功了。我可以使用三元运算符。我认为我的主要问题是我没有正确地将状态值记录到屏幕上，因此假设我的代码中的其他内容是错误的。一旦我按照您的建议对它进行 JSON 字符串化，就会弹出该值，然后我只需要使用该变量。
是的，我猜你是因为错误的日志而被卡住了?请记住，React 不会呈现布尔值?
@NoriSte 在 ajax 回调上生成字符串后如何更改 {classes}？
您可以使用React.useState 存储它，并在AJAX 调用后更新它。然后，每次设置内部状态时，组件都会重新渲染，因此类会更新?

【解决方案2】：

我想你只需要

const [ menuActive, setMenuState ] = useState(false);

在您的代码中也将 setState 的名称更改为 setMenuState

【讨论】：

我已根据您的建议更新了问题中的代码 sn-p，但仍然不正确。你是这个意思吗？

【解决方案3】：

不要忘记使用 prevState，否则你可能会遇到错误。

<button
  className="p-sidebar-menu-item__link"
  onClick={() => setMenuState((prevMenuActive) => !prevMenuActive)}>
{component.component}
</button>

【讨论】：