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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步