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

[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的得力助手. 所以安利一下.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • golang-切片copy

    landv
  • golang 自动下载所有依赖包

    大部分情况下大家下载 Go 项目都是使用go get命令,它除了会下载指定的项目代码,还会去下载这个项目所依赖的所有项目。

    landv
  • [golang]Golang实现高并发的调度模型---MPG模式

    传统的并发形式:多线程共享内存,这也是Java、C#或者C++等语言中的多线程开发的常规方法,其实golang语言也支持这种传统模式,另外一种是Go语言特有的,...

    landv
  • AI 一分钟 | 谷歌发布72量子比特处理器,或将为机器学习应用提供加速;百度已经发起对景驰撤诉,但不会对王劲撤诉

    整理 | Leo 一分钟AI 查理·芒格评人工智能商业化:我靠自己的常识已经生活得很好了,从未想过进入人工智能领域 谷歌发布72量子比特处理器,或将为机器学习应...

    AI科技大本营
  • Nodejs学习笔记(二)--- 事件模块

    简介及资料 http://nodejs.org/api/events.html http://www.infoq.com/cn/articles/tyq-n...

    Porschev
  • miRTarBase:实验验证的miRNA靶基因数据库

    miRTarBase是一个手工收集的,经过实验验证过的miRNA靶基因数据库,网址如下

    生信修炼手册
  • 植物miRNA的鉴定原理

    由上面的介绍我们知道miRNA是由可以折叠成茎环结构的的RNA产生的,由此我们可以想到只要预测基因组序列中可以折叠成茎环结构的区域就可以对miRNA进行预测了,...

    阿凡亮
  • microRNA简介

    转录本的类型是多种多样的,除了编码蛋白的RNA外,还有很多非编码蛋白的RNA, noncoding RNA, 简称ncRNA。 在ncRNA中,根据长度又分成两...

    生信修炼手册
  • 深入理解JavaScript中的this

    很多人看到this这个关键字就会感觉很恶心,因为this 关键字是 JavaScript 中最复杂的机制之一。它是一个很特别的关键字,被自动定义在所有函数的作用...

    无邪Z
  • HMDD:miRNA相关疾病数据库

    HMDD是一个手工收集整理的miRNA与疾病相关联的数据库,最新版本为V3.0,网址如下

    生信修炼手册

扫码关注云+社区

领取腾讯云代金券