React.js 实现菜单 [高亮活跃链接]

Question

以下是使用React.js代码渲染带有两个链接（'about'和'project'）的导航栏。页面加载时，“about”链接处于活动状态并呈红色。当单击其他链接时，导航栏的状态设置为“project”，“about”链接样式被还原，并将“project”颜色设置为红色。

我通过将点击处理程序附加到两个链接标记，并将活动状态设置为事件目标innerHTML的名称来实现这一点。

我是React的新手，我觉得这是一种非常冗长的方法。我知道可以将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>
        )
    }
}

- B. Kwok

Answer 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

- Yury Shapkarin

---

但是有一些需要考虑的事情，你应该为每个navlink添加确切的关键字，否则会同时突出显示多个链接。 - Zeinab

太棒了，而且解决方案简单易行！ - vishnu

@Zeinab 目前 exact 是用于深度路由，例如：path/subpath 以将它们分开为 path、path/subpath 等。 - Yury Shapkarin

@Zeinab 感谢您的提醒，已经稍微修改了示例。 - Yury Shapkarin

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

- Lyubomir

Answer 3

使用NavLink代替Link可以让您设置活动页面/链接的首选样式。

因此，您可以在CSS中设置样式，如下所示。

.active {
  color: 'red'
}

- Sodiq

Answer 4

从 React Router v6 开始，activeClassName 属性将不再起作用。在这里找到解决方案，ReactJS - <a> 标签上的未知属性 `activeClassName`。请从元素中删除此属性

- first

Answer 5

我们可以使用NavLink，根据解构的isActive属性编写自定义类处理来突出显示活动状态。

    <NavLink 
         to='/' 
         className={
         useCallback(({isActive}) => isActive ? classes.active : classes.link)}
    >
        Home
    </NavLink>

参考：https://dev59.com/e1sW5IYBdhLWcg3w8q_2#72520423

- KARTHIKEYAN.A