1.预备
一个简单的JavaScript实用程序,用于有条件地将类名连接在一起。
使用npm,Bower或Yarn安装:
npm:
npm install classnames --save
Bower:
bower install classnames --save
yarn:
使用yarn将自动得在package.json中 dependencies部分安装依赖。
yarn add classnames
在node.js&Browserify 或 webpack中使用。
或者,您可以在页面上使用独立的
<script>
标签引入index.js,它将导出全局classNames方法,或者如果您使用RequireJS则定义模块。
2.使用
classNames函数接受任意数量的参数,这些参数可以是字符串或对象。
参数’foo’是{foo:true}的缩写。 如果给定键的值是假的,则该键不会包含在输出中。
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'
备注:如dva标签里同时绑定两个类名:
// css部分
.a{
color:red;
}
.b{
font-size:20px;
}
// page页
import styles from './index.css';
class Page extends Component{
render(){
return (
<div className={classNames(styles.a, styles.b)}>
...
</div>
)
}
}
数组将按顺序、扁平化得进行展开:
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'
3.在动态类名中使用
如果您所在的环境支持计算密钥(在ES2015和Babel中可用),则可以使用动态类名:
let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });
4.在react中使用
(1)生成react类名属性
var Button = React.createClass({
// ...
render () {
var btnClass = 'btn';
if (this.state.isPressed) btnClass += ' btn-pressed';
else if (this.state.isHovered) btnClass += ' btn-over';
return <button className={btnClass}>{this.props.label}</button>;
}
});
(2)可以更容易、有条件得生成类对象
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>;
}
});
因为您可以将对象、数组、字符串参数混合在一起,即支持可选的类名。
props也更简单,因为结果中只包含truthy参数:
var btnClass = classNames('btn', this.props.className, {
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});
5.可选的备用版本(删除重复数据)
有一个备用版本的classNames可以正确地重复数据删除类,并确保从结果集中排除后面参数中指定的有类别类。
此版本较慢(约5倍),因此它作为选择加入提供。
要将删除重复数据版本与Node.js,Browserify 或 webpack一起使用:
var classNames = require('classnames/dedupe');
classNames('foo', 'foo', 'bar'); // => 'foo bar'
classNames('foo', { foo: false, bar: true }); // => 'bar'
6.可选的bind版本(css模块化)
如果您正在使用css-modules或抽象类“names”的类似方法以及输出到DOM的实际className值,您可能希望使用绑定变体。
请注意,在ES2015环境中,最好使用上面记录的“动态类名”方法。
var classNames = require('classnames/bind');
var styles = {
foo: 'abc',
bar: 'def',
baz: 'xyz'
};
var cx = classNames.bind(styles);
var className = cx('foo', ['bar'], { baz: true }); // => "abc def xyz"
Real-world example:
/* components/submit-button.js */
import { Component } from 'react';
import classNames from 'classnames/bind';
import styles from './submit-button.css';
let cx = classNames.bind(styles);
export default class SubmitButton extends Component {
render () {
let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit';
let className = cx({
base: true,
inProgress: this.props.store.submissionInProgress,
error: this.props.store.errorOccurred,
disabled: this.props.form.valid,
});
return <button className={className}>{text}</button>;
}
};
classNames> = 2.0.0
Array.isArray:有关不支持的旧浏览器(例如<= IE8)和简单的polyfill的详细信息,请参阅MDN。
Object.keys:有关不受支持的旧浏览器(例如<= IE8)和简单的polyfill的详细信息,请参阅MDN。 这仅用于dedupe.js。