className={`title ${index === this.state.active ? 'active' : ''}`}
安装:css
npm install classnames --save
使用:react
import classNames from 'classnames'; <div className=classNames({ 'class1': true, 'class2': true )> </div>
能够将后面的true省略,能够对传入的class进行比较明显的动态判断。git
其余用法:github
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' // lots of arguments of various types classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' // other falsy values are just ignored classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
也能够传入数组对象:web
var arr = ['b', { c: true, d: false }]; classNames('a', arr); // => 'a b c'
能够传入动态class:npm
let buttonType = 'primary'; classNames({ [`btn-${buttonType}`]: true });
在react中能够直接在classname内部传入动态class并进行条件判断,segmentfault
var classNames = require('classnames'); var Button = React.createClass({ // ... render () { var btnClass = classNames({ btn: true, 'btn-pressed': this.state.isPressed, 'btn-over': !this.state.isPressed && this.state.isHovered }); return <button className={btnClass}>{this.props.label}</button>; } });
import classNames from 'classnames'; import styles from './dialog.css'; export default class Dialog extends React.Component { render() { const cx = classNames({ [styles.confirm]: !this.state.disabled, [styles.disabledConfirm]: this.state.disabled }); return <div className={styles.root}> <a className={cx}>Confirm</a> ... </div> } }
gitlab库: https://github.com/JedWatson/classnames
http://www.noobyard.com/article/p-vyidcqpo-g.html
http://www.noobyard.com/article/p-aozyhmgl-cu.html数组