动态添加类名 classnames

mark 一个类名修饰库 classnames

github传送门：github.com/JedWatson/c…

why classnames

在 react 中，很多情况下我们需要添加动态类名，用 js 判断的话会显得有点臃肿，可配置性不高

classnames 通过透出一个函数来动态配置类名，透出一个函数，这个函数接收 string、number、object、array 形式传参。对象的key值为类名，value为boolean，表示是否应用这个类名。

how to use

1. 安装引入 npm

npm install classnames --save

yarn

yarn add classnames

2. 声明使用

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'

3. 举个栗子

import classNames from "classnames";

  const classes = classNames("btn", className, {
    [`btn-${btnType}`]: btnType, // 当传入了 btnType 为 lg 时，添加类名 btn-lg
    [`btn-${size}`]: size,
    disabled: btnType === 'link' && disabled,
  });