React.js實現菜單[突出顯示活動鏈接]

Question

以下React.js代碼呈現一個導航條，其中包含名爲'about'和'project'的兩個鏈接。在頁面加載時，「約」鏈接處於活動狀態並呈紅色。當另一個鏈接被點擊時，導航欄的狀態被設置爲'項目'，'約'鏈接樣式被設置回來，'項目'被標記爲紅色。

我通過將點擊處理程序附加到兩個鏈接標記來實現此目的，並將活動狀態設置爲event.target.innerHTML的名稱。

我是新來的反應，我覺得這是一個非常詳細的方法來解決這個問題。我知道有一個activeClassName道具可以傳遞給react-router鏈接，但我想要一種不使用它的方法。

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> 
    );  
    } 
}