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

【问题标题】：React.js implement menu [highlight active link]React.js 实现菜单[突出显示活动链接]
【发布时间】：2017-07-06 23:13:41
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs hyperlink toggle

【解决方案1】：

现在您可以使用来自react-router-dom 的 NavLink。此对象支持activeClassName、activeStyle 或isActive 等属性（对于函数）。

import { NavLink } from 'react-router-dom';

<NavLink to='about' activeClassName="active">about</NavLink>

// Or specifing active style
<NavLink to='about' activeStyle={{color: "red"}}>about</NavLink>

// If you use deep routes and you need an exact match
<NavLink exact to='about/subpath' activeClassName="active">about</NavLink>

更多选项请阅读文档：https://reacttraining.com/react-router/web/api/NavLink

【讨论】：

但是有一点需要考虑，你应该在每个 navlilnk 中添加确切的关键字，除非你会同时突出显示多个链接。
伟大而简单的解决方案！
@Zeinab 目前exact 用于深层路线，例如：path/subpath 将它们全部分开path、path/subpath 等
@Zeinab 感谢通知，稍微更改了示例

【解决方案2】：

可能稍微不那么冗长...在伪代码中

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

【讨论】：