Reactを使用してタブをアクティブに設定する

Question

私はexpressのテンプレートエンジンとしてReactを使用しており、適切なアンカー要素にcssクラスを追加しようとしています。

現在、要求パスをコントローラ経由でNavbarコンポーネントに戻しています。以下は私のコードです。私は....私はとても近くに感じてる

更新されたコード（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; 

Answer 1

これを実現するために、複数の方法があります。

私はあなたのアプリケーションの残りの部分についてはあまり知りませんが、これはあなたが取る必要があります一般的なアプローチである：

：

まず、それが有効なパスである場合はブール値を返すようにcheckActiveTabを変更

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

（注記：あなたはあなたの完全な成分を含んでいました、私はあなたがcheckActiveTab関数にthisを結合していないようthis.stateをチェックするために働いているかわからない）

次あなたはREN

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

Answer 2

私はこの私が、私はこれを作ることができ、このよう

でこれを行っている可能性がありました場合：タブをDER、あなたはそれが現在のページであれば、我々はアクティブなクラスを設定しますチェックしますアクティブなクラスを追加するロジックを持つコンポーネントとしてnav。

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>