如果某个元素需要切换多个样式，不同的样式使用class封装，相关代码如下：
<div className={
this.state.isHide?styles.hide+' ':''+
this.state.isActive?styles.active+' ':''+
this.state.isAlarm?styles.alarm+' ':''
}>
{data}
</div>
可以看到这段代码，让人看起来很不舒服，因为：
1、实际渲染的结果中，有可能产生多余的空格
2、每个样式类都需要使用一个react state来进行管理
3、多种样式结合使用，切换时需要分别设置他们的state
这里推荐一个npm包用来解决这个问题：
1、执行npm i classnames 或者 yarn add classnames，并引入import classname from 'classnames'
2、上述代码可替换为
<div className={classname(dataClass)}>
{data}
</div>
3、react仅需维护一个state，如果要启用某个类名仅需设置其状态为true，不用的类名设置为false即可，如下：
this.state = {
dataClass:{
isHide:true,
isActive:true,
isAlarm:true
}
}
通过classnames包，我们优化了jsx语法代码，使其更加精简，所有样式类维护在一个state中，多种样式切换，设置一次state即可。
