React.js 메뉴 구현 [활성 링크 강조]

Question

다음 React.js 코드는 navbar를 'about'과 'project'라는 두 개의 링크로 렌더링합니다. 페이지로드시 '정보'링크가 활성화되어 빨간색으로 표시됩니다. 다른 링크를 클릭하면 navbar의 상태가 'project'로 설정되고 'about'링크 스타일이 다시 설정되며 'project'는 빨간색으로 표시됩니다.

클릭 핸들러를 두 링크 태그에 모두 연결하고 active 상태를 event.target.innerHTML의 이름으로 설정하면됩니다.

나는 새로운 반응을 보입니다. 그리고 저는 이것이 이것에 대해 매우 장황한 방법이라고 생각합니다. 반응 라우터 링크에 전달할 수있는 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> 
     ) 
    } 
} 

Answer 1

어쩌면 약간은 덜 자세한 ... 의사 코드

에서

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