React动态绑定className(classnames)

Vue中有很方便的动态绑定class属性的方式，v-bind:class,那么react怎么实现这样的效果呢？

通过classnames这个插件可以实现

首先安装

yarn add classnames

来演示个案例

import classNames from 'classnames'

export default class App extends PureComponent {
  constructor(props){
    super(props);
    this.state={  
      isActive:true
    }
  }
  render() {
    return (
        <h2 className={classNames({"active":this.state.isActive},"title")}>我要动态添加class属性</h2>
    )
  }
}

效果如下：

当isActive为false时候，就不会添加这个active属性，后面的title类名是我们写的普通类名，不会受isActive影响，只要写了就会一直存在