[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的得力助手. 所以安利一下.
[OHIF-Viewers]医疗数字阅片-医学影像-React/Redux 的好帮手Classnames相关推荐
- [OHIF-Viewers]医疗数字阅片-医学影像-事件总线管理器
[OHIF-Viewers]医疗数字阅片-医学影像-事件总线管理器 添加按钮>调用命令>注册回调函数 App.js import React, { Component } from 're ...
- [OHIF-Viewers]医疗数字阅片-医学影像-cornerstone-core-Cornerstone.js提供了一个完整的基于Web的医学成像平台。...
[OHIF-Viewers]医疗数字阅片-医学影像-cornerstone-core-Cornerstone.js提供了一个完整的基于Web的医学成像平台. 还必须写中文,不然不让同步,蛋疼呀--- ...
- [OHIF-Viewers]医疗数字阅片-医学影像-es6解构赋值-const{}=-let{}=
[OHIF-Viewers]医疗数字阅片-医学影像-es6解构赋值-const{}=-let{}= 解构赋值语法是一种 Javascript 表达式.通过解构赋值, 可以将属性/值从对象/数组中取出, ...
- [OHIF-Viewers]医疗数字阅片-医学影像-es6-Element.querySelector()
[OHIF-Viewers]医疗数字阅片-医学影像-es6-Element.querySelector() https://developer.mozilla.org/zh-CN/docs/Web/A ...
- [OHIF-Viewers]医疗数字阅片-医学影像-数字胶片直接下载,不再弹窗进行设置
[OHIF-Viewers]医疗数字阅片-医学影像-数字胶片直接下载,不再弹窗进行设置 直接下载解决方案 \Viewers\extensions\cornerstone\src\commandsMod ...
- [OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法...
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法 将画布(canvas)图像保存成本地图片的方法 使用HT ...
- [OHIF-Viewers]医疗数字阅片-医学影像-使用 PropTypes 进行类型检查
[OHIF-Viewers]医疗数字阅片-医学影像-使用 PropTypes 进行类型检查 注意: 自 React v15.5 起,React.PropTypes 已移入另一个包中.请使用 prop- ...
- [OHIF-Viewers]医疗数字阅片-医学影像-REACT-Hook API索引
[OHIF-Viewers]医疗数字阅片-医学影像-REACT-Hook API索引 Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他 ...
- [OHIF-Viewers]医疗数字阅片-医学影像-中间插播一下-es6-使用const加箭头函数声明函数相对于function声明函数有什么好处?...
[OHIF-Viewers]医疗数字阅片-医学影像-中间插播一下-es6-使用const加箭头函数声明函数相对于function声明函数有什么好处? 这个好多人都已经写过了,这里插播一下,在OHIF- ...
最新文章
- 探讨SQL Server 2005.NET CLR编程
- 修改hosts文件不需要重启的方法
- 【BLE】关于蓝牙的一些学习资料分享
- java yyyy m d_日期-Java 8时间API:如何将格式“ MM.yyyy”的字符串解析为LocalD
- python可变类型和不可变深浅拷贝类型_python3笔记十四:python可变与不可变数据类型+深浅拷贝...
- linux在python的虚拟环境下运行程序_在win10和linux上分别安装Python虚拟环境的方法步骤...
- python处理一些乱码的中文文本时decode('utf-8')报错的处理
- spark-env.sh配置
- Silverlight中使用Timer的方法
- cadence IC
- 微信小程序01-底部导航栏设置
- java 以10为底的对数_获取Java中值的以10为底的对数
- python使用opencv实现人脸检测
- 如何高效进行无人机动力测试-电池效率
- 可控制导航下拉方向的jQuery下拉菜单代码
- 隔离式DC/DC高压模块5V12V24V转50V110V250V300V380V600V1100V短路保护直流升压可调开关控制电源模块
- 点云前视图与俯视图生成
- C语言简单五子棋实现
- flowable exception during resetting expired jobs: Could not open JDBC Connection for transaction
- 圣墟(圣墟最新章节,圣墟无弹窗全文阅读,圣墟无广告全文阅读)
热门文章
- Python零基础入门-4 使用函数减少重复操作
- Jmeter入参POST data乱码传入‘--VRES...SER--’的问题
- 渗透过程中日志信息分析示例
- QT 自定义带图片背景半透明阴影窗口
- 弗吉尼亚理工大学计算机科学,弗吉尼亚理工大学计算机科学研究生专业.pdf
- 运动世界校园破解刷跑步数据
- xp没有本地计算机策略,WinXP没有网络适配器怎么添加?本地连接消失了如何恢复?...
- Kali安装openVAS (GVM)
- ubuntu20.04下锁屏快捷键super+L不能用的解决方法
- 白色在html中怎么写,html如何设置文字颜色白色