仅关闭一页上的导航栏图标答案

【问题标题】：Turn off NavBar icon on one page only仅关闭一页上的导航栏图标
【发布时间】：2017-12-19 02:13:21
【问题描述】：

我想在菜单页面上下文中关闭我的菜单图标（普通页面不是模态页面），但在任何其他页面上都打开它。我正在使用 Meteor、React 和 React-Router。下图显示了基本结构。

我目前正在使用 ReactiveVar 更改 .header-center>span 中的标题文本，但它每页都会更改，因此在那里看起来很合理。

我想要一种优雅的方式来关闭/隐藏.header-left>img 的内容仅用于一页，并在导航离开时恢复。不知道我应该用 CSS 还是 JS 来做。任何想法表示赞赏。

【问题讨论】：

好的，您如何因提问而被否决？

标签： javascript css reactjs meteor react-router

【解决方案1】：

在你的菜单中添加一些类，例如class="menu menu-hidden-icon ..etc.."，你就可以用这个来隐藏你的图标了：

.menu-hidden-icon .sidebar-icon {
    display: none;
}

【讨论】：

【解决方案2】：

你可以找到路径URL并应用hide()JQuery函数。

var pathUrl = window.location.pathname;
if(pathUrl == '/menu'){
  $(".header-left").hide();
}

【讨论】：

【解决方案3】：

您可以使用this.props.location.pathname 知道何时关闭和打开它。像这样。

<div className="header-left">
    {this.props.location.pathname === 'home' ? <img className="sidebar-icon" /> : null}
</div>

此代码只会在/home 页面上显示图标，因此您必须对其进行更新以使其行为符合您的要求。但根据您想要使用的检查和页面的数量，您可能会在此处使用可维护的功能/方法变得更好。

【讨论】：

【解决方案4】：

所有这些工作，但我选择了@Lucas Reppe Welander 的回答，因为它允许图标在导航离开时恢复。非常感谢大家。我所做的只是翻转这样的逻辑：

{this.props.router.location.pathname === "/grid" 
   ? null 
   : <img className="menu-icon" onClick={()=> this.onMenu()} src={"../icons/hamburger.svg"} /> }

【讨论】：