我曾經(jīng)看到一篇文章說,其實現(xiàn)在的單頁面應用已經(jīng)有向feature-flag編程發(fā)展的傾向了.什么意思呢? 和鴻門宴一樣,項羽設局為了殺劉邦,在大廳后面埋伏了刀斧手,這些刀斧手是否行動要等主人的指令,指令以來就行動. React中的state可以很好的完成這個flag功能.這就是狀態(tài)編程.狀態(tài)就兩個true/false.根據(jù)true/false來決定狀體的變化.可以根據(jù)狀態(tài)的變化來決定是是否加載樣式,或者是改變樣式.

在React從Redux訂閱了相關的State變化以后,組件的UI要相應的做出對用戶操作的反饋,可以是某個子組件的展示/隱藏,某個css樣式的變化.這個過程要是能動態(tài)化就好了.

最近看到幾個app中使用了Classname這個組件,很好奇是干什么的,看了文檔以后才發(fā)現(xiàn)這個組件能夠提供很好的動態(tài)css樣式功能,配合基于狀態(tài)的編程,真是非常的便利.這里把文檔安利一下.

安裝

npm install classnames

使用方法

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'

可以看到鍵值為true的就返回鍵名,可以利用這個方法來動態(tài)控制鍵值的true/fale變化,從而控制是否返回鍵.注意:默認是返回的

在ES2015中可以使用動態(tài)的classname

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

React.js 中的使用

classnames結合React真是太美了

 var Button = React.createClass({
  // ...
  render () {
    var btnClass = 'btn';
    //根據(jù)點擊的state來控制css
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

可以統(tǒng)一返回一個對象

 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>;
  }
});

如果是name和className進行了映射,可以使用bind方法

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"

看看現(xiàn)實的使用例子

 /* 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';//text根據(jù)狀態(tài)來動態(tài)加載
    let className = cx({
      base: true,
      inProgress: this.props.store.submissionInProgress,//樣式的動態(tài)加載
      error: this.props.store.errorOccurred,
      disabled: this.props.form.valid,
    });
    return <button className={className}>{text}</button>;
  }
};

Classnames真的是React/Redux的得力助手. 所以安利一下.