Question

以下React.js代码会使用两个名为＆＃39; about＆＃39;的链接呈现一个导航栏。和＆＃39;项目＆＃39;。在页面上加载＆＃39; about＆＃39;链接处于活动状态并且呈红色。单击另一个链接时，导航栏的状态将设置为＆＃39; project＆＃39;，＆＃39; about＆＃39;链接样式被设置回来，＆＃39; project＆＃39;是红色的。

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

我有新的反应，我觉得这是一个非常冗长的方式来解决这个问题。我知道有一个activeClassName prop你可以传递给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

可能在Pseudocode

中略显冗长

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

Answer 2

今天，您可以从react-router-dom中使用NavLink

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

<NavLink>
    activeClassName="active"
    //if you use deep routes
    exact
</NavLink>

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

2 个答案: