react+classnames
之前做项目的时候一直不知道有不知道有classnames这个东西,一直用的都是字符串拼接,感觉用的很别扭。
classnames用法和angular1.x及vue差不多,所以用起来会比较顺手
1)安装包
cnpm install classnames --save
2)如何使用
import react,{Component} from 'react';
import classnames from 'classnames'; export default class Example extends Component{
render(){ // 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' return (<div className={classNames('foo',{bar:true})}> </div>)
}
}
react+classnames的更多相关文章
- [React] Using the classnames library for conditional CSS
Classnames is a simple yet versatile javascript utility that joins CSS class names based on a set of ...
- react之只用classNames避免字符串拼接
之前在react当中使用了字符串拼接的方式来拼接类名的字符串,这种方法不仅不够方便,还会出现很多问题 使用classNames这个工具,可以省去拼接字符串的烦恼,大大提高开发效率 首先,最简单的使用方 ...
- react 通过 classnames 处理 多个class 的问题
react原生动态添加多个className会报错: import style from './style.css' <div className={style.class1 style.cla ...
- 如何使用classnames模块库为react动态添加class类样式
摘要 在react中添加动态的css时,传统的方式较为繁琐,今天刚好学习到一个模块库可以便捷的解决这个问题.对的,它就是“classnames”. classnames模块库 npm安装 npm in ...
- classnames & React & taro
classnames & React & taro classnames https://www.npmjs.com/package/classnames demo https://g ...
- react基础(1)
在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...
- 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)
一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...
- Redux教程2:链接React
通过前面的教程,我们有了简单的环境,并且可以运行Redux的程序,也对 如何编写Redux示例 有了初步的印象: 掌握了 使用Redux控制状态转移 ,继而驱动 React 组件发生改变,这才是学习R ...
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
随机推荐
- 家庭记账本之微信小程序(二)
在网上查阅了资料后,了解到了在完成微信小程序之前要完成注册阶段的工作,此次在这介绍注册阶段的流程. 1.首先你要确定小程序的定位.目的以及文案资料等(准备工作). 2.打开微信公众平台官网,点击右上角 ...
- flask 定义数据关系(多对一)
多对一 一对多关系反过来就是多对一关系,这两种关系模式分别从不同的视角出发.一个作者拥有多篇文章,反过来就是多篇文章属于同一个作者.为了便于区分,我们使用居民和城市来演示多对一关系:多个居民住在同一个 ...
- jenkins git can't work ERROR: Timeout after 10 minutes ERROR: Error fetching remote repo 'origin'
Started by user Allen Running as Allen Building remotely on MISTestSrv2 (MIS) in workspace C:\jenkin ...
- webservice 开发规范
JAVA中共有三种WebService规范,分别是:JAXM&SAAJ.JAX-WS(JAX-RPC).JAX-RS 下面类分别简要介绍一下这三个规范 1. JAX-WS (Java API ...
- js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...
- P4027 [NOI2007]货币兑换(斜率优化dp+cdq分治)
P4027 [NOI2007]货币兑换 显然,如果某一天要买券,一定是把钱全部花掉.否则不是最优(攒着干啥) 我们设$f[j]$为第$j$天时用户手上最多有多少钱 设$w$为花完钱买到的$B$券数 $ ...
- Docker Swarm 环境搭建
Docker Swarm 环境搭建 swarm 使用前提 1.Docker版本1.12+ Docker升级教程:https://www.cnblogs.com/xiangsikai/p/9935894 ...
- Idea 全局替换指定字符
最近使用idea开发,刚接触不久,然后碰到需要全局替换的时候,懵逼了.之前使用eclipse 直接Ctrl+F 就可以操作了. 现在使用idea 摁Ctrl+F竟然只能搜,不能替换....尴尬的一匹. ...
- 剑指offer(22)从上往下打印二叉树
题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 题目分析 从下打印就是按层次打印,其实也就是树的广度遍历. 一般来说树的广度遍历用队列,利用先进先出的特点来保存之前节点,并操作之前的 ...
- GIT操纵
简易的命令行入门教程: Git 全局设置: git config --global user.name "XXX" git config --global user.email & ...