web-dev-qa-db-ja.com

React.js実装メニュー[アクティブリンクを強調表示]

次のReact.jsコードは、「about」と「project」という名前の2つのリンクを持つナビゲーションバーをレンダリングします。ページの読み込み時に、「about」リンクがアクティブになり、赤色になります。他のリンクをクリックすると、ナビゲーションバーの状態が「プロジェクト」に設定され、「約」リンクスタイルが元に戻り、「プロジェクト」が赤になります。

これを実現するには、両方のリンクタグにクリックハンドラーをアタッチし、アクティブの状態をevent.target.innerHTMLの名前に設定します。

私は反応するのが初めてで、これは本当に冗長な方法だと思います。 react-routerリンクに渡すことができるactiveClassNameプロップがあることは知っていますが、それを使用しない方法が必要です。

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>
        )
    }
}
javascriptreactjshyperlinktoggle
5
B. Kwok

多分少し冗長ではない...擬似コードで

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

この日、react-router-domからNavLinkを使用できます

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

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