reactjs - React State Hook - 切换一个类
问题描述
我正在尝试构建一个侧边栏导航菜单,并认为我会利用 React 中的新状态挂钩。我已经阅读了文档,但似乎找不到与我需要的示例类似的示例,这很简单,可以在单击时切换 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;
有什么想法我哪里出错了吗?
谢谢
解决方案
只需使 className 动态化,而不是设置
<li className="p-sidebar-menu-item">
将其转换为模板文字
<li className={`p-sidebar-menu-item`}>
然后有条件地添加您的课程(我的示例中的“黄色”课程)
<li className={`p-sidebar-menu-item ${menuActive ? "yellow" : ""}`}>
看看这个CodeSandbox:这里我刚刚添加了您的组件并更改了className
属性的生成方式。
如果您想避免使用三元运算符,您可以使用classnames 模块,然后将代码更新为
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}>
如果您需要更多帮助,请告诉我
推荐阅读
- amazon-web-services - docker exec cli 对等通道创建 | 未能创建新连接:超出上下文期限 | 亚马逊管理的区块链
- elasticsearch - ElasticSearch 应该嵌套和 bool must_not 存在
- sql - 更新表 1 中与表 2 不匹配的多个列。如果匹配,我不想更新
- c# - 在 DDD 中,子实体是否可以引用聚合根
- c# - C# Datetime 用小时和分钟添加天数
- datetime - Pine Script:如何在每次价格更新时在标签上的图表时区显示当前时间?
- reactjs - orderBy 与 react-firebase-hooks/firestore 不工作
- jquery - 使用ajax向json子对象提交值
- sql - 如何构建允许我在数字字段中插入空白的 SQL 插入查询?
- heroku - 使用 Heroku 发布 Streamlit 应用程序时出现问题