之前做项目的时候一直不知道有不知道有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的更多相关文章

  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避免字符串拼接

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

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

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

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

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

  5. classnames & React & taro

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

  6. react基础(1)

    在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...

  7. 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)

    一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...

  8. Redux教程2:链接React

    通过前面的教程,我们有了简单的环境,并且可以运行Redux的程序,也对 如何编写Redux示例 有了初步的印象: 掌握了 使用Redux控制状态转移 ,继而驱动 React 组件发生改变,这才是学习R ...

  9. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

随机推荐

  1. 小学生都能看懂的FFT!!!

    小学生都能看懂的FFT!!! 前言 在创新实践重心偷偷看了一天FFT资料后,我终于看懂了一点.为了给大家提供一份简单易懂的学习资料,同时也方便自己以后复习,我决定动手写这份学习笔记. 食用指南: 本篇 ...

  2. 深入理解Java虚拟机5-chap7-斗者2星

    一.类加载机制 1.类加载机制:虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Class文件加载到内存,这就是类加载机制. 2.类型 ...

  3. Flask最强攻略 - 跟DragonFire学Flask - 第十五篇 Flask-Script

    其实本章就是为下一章做的铺垫啦,但是也要认真学习哦 Flask-Script 从字面意思上来看就是 Flask 的脚本 是的,熟悉Django的同学是否还记得Django的启动命令呢? python ...

  4. KNN算法 - 数据挖掘算法(3)

    (2017-04-10 银河统计) KNN算法即K Nearest Neighbor算法.这个算法是机器学习里面一个比较经典的.相对比较容易理解的算法.其中的K表示最接近自己的K个数据样本.KNN算法 ...

  5. MySQL条件检索_WHERE

    MySQL使用WHERE命令来限定数据查询条件. 语法:SELECT 属性1,属性2 FROM 表名 WHERE 条件1 OR 条件2 AND 条件3 说明:WHERE同样适用于UPDATE.DELE ...

  6. yii2 使用多个数据库的案例

    配置: 'components' => [ 'db' => [ 'class' => 'yii\db\Connection', 'dsn' => 'mysql:host=ip; ...

  7. 获取从库Seconds_Behind_Master监控主从同步

    #!/bin/bash now_date=`date "+%Y-%m-%d,%H:%M:%S"` flag_old=`cat /home/oracle/scripts/flag.t ...

  8. 3. Dubbo原理解析-Dubbo内核实现之动态编译 (转)

    转载自  斩秋的专栏  http://blog.csdn.net/quhongwei_zhanqiu/article/details/41577159 我们运行的Java代码,一般都是编译之后的字节码 ...

  9. npm 清理缓存

    npm cache clean -f 有些时候npm下载资源出错,再次下载的时候可能因为之前错误的缓存造成一直下载不成功. 此时可以清一下npm的缓存,然后尝试重新下载

  10. 清华集训2017 Day 2简要题解

    *注意:这套题目题面请在loj / uoj查看 从这里开始 题目列表(loj) Problem A 小 Y 和地铁 Problem B 小 Y 和二叉树 Problem C 小 Y 和恐怖的奴隶主 训 ...