Day25：【技术篇】JavaScript 套件 - classnames

一、前言

  classnames 是一个方便 JavaScript 管理 class name 的 package，可以有条件的设定 class name！
  因为工作後，学习到 Mithril.js 这个前端框架，虽然很冷门与小众，但实际运用它後发现，其实它与 React.js 概念非常相似，所以本篇套件分享，也会介绍一点两者实际使用的案例写法～

二、说明与举例

  如果我们要设定多个 class name 给一个元件，通常我们会这样写：

// React 实际使用案例
render() {
  return (<div className="class1 class2 class3">这是一个div</div>);
}

// Mithril 实际使用案例
return m('.class1.class2.class3', '这是一个div')

  可是如果要根据元件 state 或是 props 来改变这些 class状态，就会显得很复杂。为了避免这样复杂的写法，我们可以使用 classnames 来管理 class，当然，首先也是要先 install package：

$npm install classnames --save

  classnames 基本的用法，如下

import classNames from 'classnames';
classNames('foo', 'bar'); // => 'foo bar'

  classnames 是一个 function，可以传入 string 或是 object，如果传入 'foo' ，表示是 {foo: true} 的缩写。当 key 的 value 是falsy (相当於false)，表示是不显示的 class，有时候配合判别式可以决定某个 state 或 props 情况下不显示 class。

以下是官方说明的范例，看完应该就会秒懂：

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'

// 传入多组string或object
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// 只要是falsy value，都会被忽略不显示
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

// 当传入阵列时，每一个值都会扁平化
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

  而配合 ES6 的 Template literals，可以动态组合 key 的名称：

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });  // => 'btn-primary'

改写上面提到复杂的写法，就会是这样：

// React 实际使用案例
import classNames from 'classnames';


render() {
  const classStr = classNames({
    'class1': true,
    'class2': this.props.isCompleted,
    'class3': !this.props.isCompleted
  });
  return (<div className={classStr}></div>);
}

// Mithril 实际使用案例
import classNames from 'classnames';

view(){
    return m('div.row.mb-n3', [
        m(Label, '类别'),
        m(Select, {
            class: classNames({
              'class1': this.valid.hasOwnProperty('type') && !this.model.hasError('type'),
              'class2': this.model.hasError('type')
            }),
        },
}

三、结论与自我鼓励

• 参考网站：it邦帮忙-在React中使用class
• 参考网站：官方网站

  因为公司用的 Mithril.js 前端框架，网路资源非常少，所以也培养了我们团队学习观察别的框架，转换思维写成这个框架的运用技巧，虽然有时候会觉得研究的时间很长，但也很有成就感呢！

本文同步发布於我的个人网站 Annie Code Life