React | classnames

classnames 这个库在我们的项目中有大量的使用到，它不仅很实用，还非常好用，但还有人不知道这个库，我真的是十分心痛。

通过 classnames，我们可以给组件设置多个 className，还可以根据需要动态设置 className，简化我们样式相关的逻辑代码。

// 鼠标离开
.btn-leave {background-color: red;font-size: 25px;
}// 鼠标放上
.btn-over {background-color: green;font-size: 40px;border-radius: 20px;
}.btn-color {color: yellow;
}.btn-margin {margin: 50px;
}

import { default as classNames } from 'classnames';
import { Component } from 'react';
import './style.less';export default class ClassnamesPage extends Component {render() {return (<div style={{ padding: '20px' }}>ClassnamesPage<MyComponent></MyComponent></div>);}
}class MyComponent extends Component {state = {// 鼠标是否放上去isMouseOver: false,};render() {// 设置多个classNamevar btnClass = classNames('btn-color', 'btn-margin', {// 动态设置className，右边为true时生效'btn-leave': !this.state.isMouseOver,'btn-over': this.state.isMouseOver,});return (<div><buttonclassName={btnClass}// 鼠标放上onMouseOver={() => {this.setState({isMouseOver: true,});}}// 鼠标离开onMouseLeave={() => {this.setState({isMouseOver: false,});}}>{this.state.isMouseOver ? '鼠标放上' : '鼠标离开'}</button></div>);}
}