Javascript React.js实现菜单[突出显示活动链接]

下面的React.js代码呈现了一个带有两个名为“about”和“project”链接的导航栏。在页面加载中，“关于”链接处于活动状态，并显示为红色。单击另一个链接时，导航栏的状态设置为“项目”，“关于”链接样式设置为后退，“项目”颜色为红色

我通过在两个链接标记上附加一个单击处理程序来实现这一点，并将active的状态设置为event.target.innerHTML的名称

我是个新来的反应者，我觉得这是一种非常冗长的方式。我知道有一个activeClassName道具可以传递给react路由器链接，但我想要一种不使用它的方式

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

import React，{Component}来自“React”
从“反应路由器”导入{Link，Route}
导出默认类导航栏扩展组件{
构造函数（）{
超级（）；
此.state={
活动：“关于”
}
this.\u handleClick=this.\u handleClick.bind（this）；
}
_handleClick（e）{
这是我的国家({
活动：e.target.innerHTML
});
}
render（）{
让我们谈谈风格；
让项目风格；
if（this.state.active==='about'）{
aboutStyle={color:'#ff3333'}；
projectStyle={}；
}否则{
aboutStyle={}；
projectStyle={color:'#ff3333'}；
}
返回(
BK&47；&47；
关于
项目
)
}
}

可能会稍微少一点冗长。。。伪码

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

const menuItems=[
“项目”，
“关于”，
];
类MenuExample扩展了React.Component{
_handleClick（menuItem）{
this.setState（{active:menuItem}）；
}
呈现（）{
常量activeStyle={color:'#ff3333'}；
返回(
{menuItems.map（menuItem=>
{menuItem}
)}
);    
}
}

在这一天，您可以从

反应路由器dom使用NavLink

。此对象支持属性，如

activeClassName

，

activeStyle

，或

isActive

（用于函数）

从'react router dom'导入{NavLink}；
关于
//或指定活动样式
关于
//如果你使用深路线，你需要一个精确的匹配
关于

---

更多选项阅读文档：

但有一些事情要考虑，你应该给每个NaviLnk添加确切的关键字，除非你同时得到多个链接。Zeinab目前用于深度路由，例如：

path/subpath

将它们全部分离开来

path

，

path/subpath

等等