0
点赞
收藏
分享

微信扫一扫

classnames-plus 实例

classnames-plus 实例_github

 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​​

 

 


举报

相关推荐

0 条评论