react如何给选中的导航添加样式

Question

要给选中的导航加一个选中的样式怎么加，这是我的实现方式：

 var sideBarConfig = [
            {link: '/jxc/material', icon: '../../../img/material-icon.png', text: '物料'},
            {link: '/jxc/material/pickinglist', icon: '../../../img/material-categroy-icon.png', text: '物料分类'},
            {link: '/jxc/material/inventory', icon: '../../../img/material-inventory-icon.png', text: '盘点'}
        ];
        var sideCon = $.map(sideBarConfig, function (conf) {
             return <li key={conf.link} ><Link to={conf.link} className={cls}>
                       <img src={conf.icon}/>
                       <span>{conf.text}</span>
            </Link></li>
        });

Answer 1

this.state = {
    currentIndex: 0
} 

handleClick(index) {
    this.setState({
        currentIndex: index
    })
}

var sideCon = $.map(sideBarConfig, function (conf, index) {
             let Link的样式 = index === this.state.currentIndex ? 特殊样式 + ' ' + 默认样式 : 默认样式;
             return <li key={conf.link} onclick={this.handleClick(this, index)} >
                       <Link to={conf.link}  className={Link的样式}>
                           <img src={conf.icon}/>
                           <span>{conf.text}</span>
                       </Link>
                    </li>
        });
 

就是说你给每个li一个点击事件，用来改变currentIndex的值， 当currentIndex的值和其中一个li的index的值一样的时候就给他加上一个特殊样式

Answer 2

className中用state中的某个字段做验证

render() {
  {
    modules.map((m) => {
      return <li className={'default' + this.state.currentModule === m ? ' someClass' : ''}></li>
    })
  }
}

Answer 3

有一个activeClassName属性可以用，不过需要每个Link都添加这个属性。

<Link to={conf.link} activeClassName="active"/>

另外一种方法就是给需要高亮的导航单独定义一个模块：
比如创建一个NavLink.js

import React from 'react'
import {Link } from 'react-router'

export default React.createClass({
    render(){
        return <Link {...this.props} activeClassName="active"/>
    }
})

然后在需要的地方引入这个模块，比如app.js中使用：
//...
import NavLink from './NavLink'
//...
<li><NavLink to="/about">about</NavLink></li>
<li><NavLink to="/">Home</NavLink></li>

Answer 4

直接使用Link组件自身的接口activeClassName或activeStyle，参考Link组件API

// activeClassName
<Link to={conf.link} activeClassName='cls-active'  className={Link的样式}> <img src={conf.icon}/> <span>{conf.text}</span </Link>

// activeStyle
<Link to={conf.link} activeStyle={{background:red}}  className={Link的样式}> <img src={conf.icon}/> <span>{conf.text}</span </Link>