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影响,只要写了就会一直存在

Logo

前往低代码交流专区

更多推荐