classnames-plus 实例

 js：

import React, { Component } from 'react'
import classNamesPlus from 'classnames-plus'
import './App.css'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tabActiveIndex: 0
    }
  } 
  handleClick(tabActiveIndex) {
    this.setState({tabActiveIndex})
  } 
  render() {
    return (
      <ul>
        <li className={
            classNamesPlus('m-tab', () => {
              return this.state.tabActiveIndex === 0 ? 'active': ''
            })
          } 
          onClick={this.handleClick.bind(this, 0)}>css
        </li>
        <li className={
            classNamesPlus('m-tab', () => {
              return this.state.tabActiveIndex === 1 ? 'active': ''
            })
          } 
          onClick={this.handleClick.bind(this, 1)}>javascript
        </li> 
        <li className={
            classNamesPlus('m-tab', () => {
              return this.state.tabActiveIndex === 2 ? 'active': ''
            })
          } 
          onClick={this.handleClick.bind(this, 2)}>html
        </li>                
      </ul>
    );
  }
}

export default App;

css：

.m-tab{list-style-type: none;color: #000000;cursor: pointer;}
.m-tab.active{color: #f66f0c}

npm:https://www.npmjs.com/package/classnames-plus

github:https://github.com/xutongbao/classnames-plus