设置标签为激活使用React

我使用React作为模板引擎进行表达，并尝试将CSS类添加到适当的锚点元素。设置标签为激活使用React

我目前通过控制器传回请求路径到导航栏组件。以下是我的代码。我觉得我是如此接近....

更新的代码（2017年5月31日）：

const React = require('react'); 


class Navbar extends React.Component { 
    constructor(...props) { 
    super(...props); 
    this.setActiveTab = this.setActiveTab.bind(this) 
    this.state = { 
     currentPage: "/" 
    } 
    } 

    setActiveTab(e) { 
    console.log(e.target) 
    this.setState({ 
     currentPage: e.target.href 
    }) 
    } 

    render() { 
    const { path } = this.props 
    let classString = path === this.state.currentPage ? 'nav-item is-tab is-active' : 'nav-item is-tab' 

    return (
     <nav className="nav"> 

     <div className="nav-left"> 
      <a className="nav-item"> 
      <h1>CREATORS NEVER DIE</h1> 
      </a> 
     </div> 

     <div className="nav-right nav-menu"> 
      <a href="/" className={classString} onClick={this.setActiveTab}> 
      Home 
      </a> 
     </div> 


     </nav> 
    ) 
    } 
} 

module.exports = Navbar;

来源

2017-05-31 Dileet

什么是你所面对的错误？ –

@VikramSaini目前没有面临任何错误。这显示在控制台中：console.log（“路径与currentPage相同”）。我不确定接下来要执行的步骤将类添加到正确的锚标记 – Dileet

好的，你能解释一下你想达到什么吗？ –

有多种方式来实现这一目标。

我不知道很多关于你的应用程序的其余部分，但是这是一般的方法，你将不得不采取：

首先修改checkActiveTab返回一个布尔值，如果是活动路径：

checkActiveTab = (path) => { 
return path === this.state.currentPage; 
}

（旁注：你包括你的全成分我不知道它是如何工作的检查this.state因为你没有约束力this到checkActiveTab功能）

下一页时幽人明镜标签，你会检查它是否是当前页面，那么我们将设置活动类：

<a href="/" className={`nav-item is-tab ${ this.checkActiveTab('Home') ? 'is-active' : '' }`}> 
    Home 
</a>

来源

2017-05-31 05:01:27

我确实包括我的完整组件。我将如何将状态更改为当前页面？ – Dileet

我刚更新了问题中的代码。我创建了一个函数来设置状态onClick，但它似乎并没有注册，因为我没有获取控制台日志集函数内。 – Dileet

这是因为您使用的是定位标记，导致浏览器转到新页面，并且组件将再次挂载。 –

，如果我是这样的，我可以这样

我会犯这样的已经做到了这一点导航作为组件与一些逻辑添加活动类。

const Nav = (props) => { 
    let classString = props.isActive ? 'nav-item is-tab is-active' : 'nav-item is-tab' 
    return (<div className="nav-right nav-menu"> 
      <a href={props.path} className={classString}> 
      Home 
      </a> 
     </div> 
    ) 
}

现在你可以编写基于在父组件检查导航组件发送路径和isActive布尔逻辑。

基于URL我可以确定哪些Nav将isActive道具视为true。

例如

<Nav path={this.props.path} isActive ={this.props.path === this.state.currentPage} </Nav>

来源

2017-05-31 05:21:04

已更新我的代码。父级没有关于当前页面的导航栏的状态。所以我们应该继续使用导航栏组件。我目前的问题是当我点击适当的链接时更新导航栏状态。现在，当我按Home链接时，我没有获取在该函数中设置的console.log。 – Dileet

设置标签为激活使用React

回答

相关问题