npm（classnames）更灵活使⽤类名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 = ateClass({
/
/ ...
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 = ateClass({
/
/ ...
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 ? '' : 'Submit';
let className = cx({
base: true,
inProgress: this.props.store.submissionInProgress,
error: this.Occurred,
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。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。