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