之前做项目的时候一直不知道有不知道有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. 开发流程(Vue)

    1.当你拿到一个需求时,先不要着急完成静态页面 2.重点观察数据结构,进行数据的分析,包括前端所需要的数据类型从而进行数据类型定义(如果是前后端分离的情况下,建议不要考虑前端数据和数据库的数据类型对应 ...

  2. 队列ADT

    队列 队列是FIFO表,使用队列时在队尾(rear)插入元素,称之为入队(enqueue),以及在对头(front)删除并返回元素值,称之为出队(dequeue). 任何表的实现都可以用于实现队列结构 ...

  3. sitecore开发入门Sitecore的CRUD操作 - 第一部分

    在本文中,讨论如何使用Sitecore.Data.Items.Item并对这些项执行CRUD(创建,读取,更新和删除)操作.我还将介绍如何使用Glass和Fortis类库进行相同的操作,这些操作都是对 ...

  4. Java基础(basis)-----关键字final和static的作用

       1.关键字final      final修饰类:这个类就不能被继承      final修饰方法:不能被重写      final修饰属性:此属性就是一个常量,一旦初始化后,不可再被赋值.习惯 ...

  5. Python 两个星号(**)的 参数

    将参数以字典的形式导入

  6. linux sar的使用

    sar(System Activity Reporter系统活动情况报告)是目前Linux上最为全面的系统性能分析工具之一,可以从多个方面对系统的活动进行报告,包括:文件的读写情况.系统调用的使用情况 ...

  7. java中的ElasticSearch搜索引擎介绍。

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apach ...

  8. javascript Template tmpl

    前两天写前端遇到很多table 和 表单需要拼接的问题 , 一堆的字符串 , 页面显得冗长,又不好维护.于是有了下文. 话不多说,上代码: 首先引用一个js文件: <script src=&qu ...

  9. Docker Kubernetes 高可用架构设计

    Docker Kubernetes 高可用架构设计 官方方案:保证master端不发生单点故障. 官方使用一台Load Balancer负载均衡代理3台master端,终端与etcd与work Nod ...

  10. Python paramiko 修改源码实现用户命令抓取

    paramiko 源码修改 paramiko主要用来实现ssh客户端.服务端链接,上一节我们说到了堡垒机,堡垒机内有一个需求是“用户行为审计”,在这里我们就可以通过修改paramiko内文件的源码来实 ...