如何优雅的在JSX语法中切换多个className？

如果某个元素需要切换多个样式，不同的样式使用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即可。