[OHIF-Viewers]医疗数字阅片-医学影像-React/Redux 的好帮手Classnames

我曾经看到一篇文章说,其实现在的单页面应用已经有向feature-flag编程发展的倾向了.什么意思呢? 和鸿门宴一样,项羽设局为了杀刘邦,在大厅后面埋伏了刀斧手,这些刀斧手是否行动要等主人的指令,指令以来就行动. React中的state可以很好的完成这个flag功能.这就是状态编程.状态就两个true/false.根据true/false来决定状体的变化.可以根据状态的变化来决定是是否加载样式,或者是改变样式.

在React从Redux订阅了相关的State变化以后,组件的UI要相应的做出对用户操作的反馈,可以是某个子组件的展示/隐藏,某个css样式的变化.这个过程要是能动态化就好了.

最近看到几个app中使用了Classname这个组件,很好奇是干什么的,看了文档以后才发现这个组件能够提供很好的动态css样式功能,配合基于状态的编程,真是非常的便利.这里把文档安利一下.

安装

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的就返回键名,可以利用这个方法来动态控制键值的true/fale变化,从而控制是否返回键.注意:默认是返回的

在ES2015中可以使用动态的classname

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

React.js 中的使用

classnames结合React真是太美了

var Button = React.createClass({ // ... render () { var btnClass = 'btn'; //根据点击的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>; } }); 

可以统一返回一个对象

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" 

看看现实的使用例子

/* 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根据状态来动态加载 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真的是React/Redux的得力助手. 所以安利一下.