React.jsメニューを実装する[アクティブなリンクを強調表示]

Question

次のReact.jsコードは、「約」と「プロジェクト」という2つのリンクを持つナビゲーションバーをレンダリングします。ページの読み込み時に、「約」リンクがアクティブで、赤色になります。他のリンクをクリックすると、navbarの状態が 'project'に設定され、 'about'のリンクスタイルが設定され、 'project'は赤色に設定されます。

リンクハンドラを両方のリンクタグにアタッチして、これを実現し、アクティブ状態をevent.target.innerHTMLの名前に設定します。

私は反応が新しく、これはこれについて実際に冗長な方法だと思います。私はあなたが反応ルータのリンクに渡すことができるactiveClassNameの小道具があることを認識していますが、私はそれを使用しない方法が欲しいです。

import React, { Component } from 'react' 
import { Link, Route } from 'react-router' 

export default class Navbar extends Component { 
    constructor() { 
     super(); 
     this.state = { 
      active: 'about' 
     } 
     this._handleClick = this._handleClick.bind(this); 
    } 

    _handleClick(e) { 
     this.setState({ 
      active: e.target.innerHTML 
     }); 
    } 

    render() { 
     let aboutStyle; 
     let projectStyle; 

     if (this.state.active === 'about') { 
      aboutStyle = { color: '#ff3333' }; 
      projectStyle = {}; 
     } else { 
      aboutStyle = {}; 
      projectStyle = { color: '#ff3333' }; 
     } 

     return (
     <div className='navbar'> 
      <Link to='/'><h2>BK &#47;&#47;</h2></Link> 
      <div className='menu'> 
       <Link style={aboutStyle} onClick={this._handleClick} to='about'>about</Link> 
       <Link style={projectStyle} onClick={this._handleClick} to='projects'>projects</Link> 
      </div> 
     </div> 
     ) 
    } 
} 

Answer 1

多分わずかに少ない冗長...擬似コード

で

const menuItems = [ 
    'projects', 
    'about', 
]; 

class MenuExample extends React.Component { 

    _handleClick(menuItem) { 
    this.setState({ active: menuItem }); 
    } 

    render() { 
    const activeStyle = { color: '#ff3333' }; 

    return (
     <div className='menu'> 
     {menuItems.map(menuItem => 
      <Link 
      style={this.state.active === menuItem ? activeStyle : {}} 
      onClick={this._handleClick.bind(this, menuItem)} 
      > 
       {menuItem} 
      </Link> 
     )} 
     </div> 
    );  
    } 
}