React通过classnames库添加类的方法_React_

按钮

Hello Vue
Hello Vue

Hello Vue 

我是标题

我是标题

classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({ foo: true }, { bar: true }); // => 'foo bar' classNames({ foo: true, bar: true }); // => 'foo bar classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1' 

render() { const { isActive } = this.state return ( 
 {/* 传入两个字符串, 表示绑定两个class */} 
标题
 {/* 明确绑定aaa类, 根据变量的布尔值决定是否绑定bbb */} 
标题
 {/* js是无法识别短横线的, 如果是短横线连接的类名, 需要用引号包裹 */} 
标题
 {/* 有多个不确定是否添加的类名, 可以使用多个对象 */} 
标题
 {/* 也可以写在一个对象中 */} 
标题
 {/* 和vue一样, 也是支持数据的写法, 以及数组和对象的混合写法 */} 
标题
标题
 ) } 

yarn add classnames

1
 //下面这个字符串拼接添加类名记得" active"前需要一个空格 
2
 //下面就避免上述的还需要加空格 
3

import classNames from "classnames"

//一次多个类名 
1
 //根据变量的真否判断是否添加类名 
2
 //数组的形式实现 
3