React中编写模板时给标签添加class。

如果是固定的className="XX"就可以了。

如果要根据状态值动态应用或去除,

或使用多个class时就麻烦了。

可以使用classnames模块来解决:

var classnames= require('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' 

classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' 

classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1' 
classNames('a',['b',{c:true}])
 
它有多种使用,参数要以是多个,可以是字符串,也可以是对象,还可以是数组。组成使用也可以
,通过值的true false来判断是否应用
 

<div className={classnames('h1 h2')} >

className={classnames({'a':true,'b':false})}

react中需这样使用

classnames的更多相关文章

  1. [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 ...

  2. react+classnames

    之前做项目的时候一直不知道有不知道有classnames这个东西,一直用的都是字符串拼接,感觉用的很别扭. classnames用法和angular1.x及vue差不多,所以用起来会比较顺手 1)安装 ...

  3. 每日质量NPM包-classnames

    一.classnames 现在到处都追求效率开发,所谓存在即合理,各种各样的开源包/项目火热,也是因为他们大大解决了之前复杂的逻辑.作为榜上前10的热门包:classnames.还真需要了解了解它才能 ...

  4. react之只用classNames避免字符串拼接

    之前在react当中使用了字符串拼接的方式来拼接类名的字符串,这种方法不仅不够方便,还会出现很多问题 使用classNames这个工具,可以省去拼接字符串的烦恼,大大提高开发效率 首先,最简单的使用方 ...

  5. react 通过 classnames 处理 多个class 的问题

    react原生动态添加多个className会报错: import style from './style.css' <div className={style.class1 style.cla ...

  6. 如何使用classnames模块库为react动态添加class类样式

    摘要 在react中添加动态的css时,传统的方式较为繁琐,今天刚好学习到一个模块库可以便捷的解决这个问题.对的,它就是“classnames”. classnames模块库 npm安装 npm in ...

  7. npm(classnames) 更灵活使用类名

    npm install classnames --save import classNames from 'classnames'; const inputCls = classNames({ [st ...

  8. classnames & React & taro

    classnames & React & taro classnames https://www.npmjs.com/package/classnames demo https://g ...

  9. 制作自己的MVC框架(二)——启动

    自己写了个框架,取名为“PrimusPHP”,就3个文件夹,log中是日志文件,会自动生成. app中就是控制器和视图,public中是入口文件和静态资源,library中既有框架的核心类,还有工具类 ...

随机推荐

  1. SpringBoot 2.2.2集成ElasticSearch 7.5.1

    前言:现在公司有一个项目要用到检索功能,检索上面现在最常用的是Solr/ES,最后经过对比选择了ElasticSearch开源组件包,因为这个是公司的一个产品项目,技术版本当然要用最新的啦,最后完全确 ...

  2. iOS播放器、Flutter高仿书旗小说、卡片动画、二维码扫码、菜单弹窗效果等源码

    iOS精选源码 全网最详细购物车强势来袭 一款优雅易用的微型菜单弹窗(类似QQ和微信右上角弹窗) swift, UITableView的动态拖动重排CCPCellDragger 高仿书旗小说 Flut ...

  3. 17.3.13--pycharm2和3的常识问题

    1------pycharm 3~支持print(),不支持那个 print+一个空格的形式 pycharm2~~支持print+一个空格,,也支持那个print()形式 虽然print语法是Pyth ...

  4. 吴裕雄--天生自然TensorFlow高层封装:解决ImportError: cannot import name 'tf_utils'

    将原来版本的keras卸载了,再安装2.1.5版本的keras就可以了.

  5. shell脚本中的条件测试if中的-z到-d的意思

    文件表达式 if [ -f  file ]    如果文件存在if [ -d ...   ]    如果目录存在if [ -s file  ]    如果文件存在且非空 if [ -r file  ] ...

  6. 903A. Hungry Student Problem#饥饿的学生(暴力&双层枚举)

    题目出处:http://codeforces.com/problemset/problem/903/A 题目大意就是:一个数能否用正整数个另外两个数合成 #include<iostream> ...

  7. 【Java杂货铺】用Security做权限极简入门

    原来大多数单体项目都是用的shiro,随着分布式的逐渐普及以及与Spring的天生自然的结合.Spring Security安全框架越受大家的青睐.本文会教你用SpringSecurity设计单项目的 ...

  8. 存储过程获取QLIKVIEW关键数据

    declare @table table(DDID INT,FHDID INT ,CKDID INT,ZGYSDID INT,CWYSDID INT)--定义表变量来存放存储过程返回的内容insert ...

  9. space sniffer

    space sniffer 一款检测本地磁盘文件占用情况的工具,高效,快速.

  10. 导入import的多种形式

    参考资料:anaconda官方资料 一.module(模块) 比如fibo是个模块(.py文件),其中有fib.fib2等函数 第一种形式:import fibo 在当前的符号表中,这并不会直接进入到 ...