之前做项目的时候一直不知道有不知道有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. 移动端项目在ios上输入框聚焦难解决方案

    由于引入fastclick导致ios端input.textarea输入框难以点击聚焦,解决方案如下: 找到项目中的fastclick依赖或在main.js中改写fastclick的focus实现.

  2. ansible的高级应用-roles

    在之前我们知道了playbook,类似于shell的脚本,playbook适用于一些不太麻烦的部署任务,比如说使用playbook安装mysql,那么我们直接写一个playbook文件即可.可是如果我 ...

  3. 扩容 swap 分区

    扩容 swap 分区 题:添加一个 swap 分区在您的系统中添加一个大小为 512 MiB 的 swap 分区.当您的系统启动时,swap 分区应 该可以自动挂载.不要移除或者修改其他已经存在于您的 ...

  4. Docker Kubernetes 常用命令

    Docker Kubernetes 常用命令 增 # 通过文件名或标准输入创建资源. kubectl create # 读取指定文件内容,进行创建.(配置文件可指定json,yaml文件). kube ...

  5. Python pyc知识了解

    pyc 是什么 1. Python是一门解释型语言? 我初学Python时,听到的关于Python的第一句话就是,Python是一门解释性语言,我就这样一直相信下去,直到发现了*.pyc文件的存在.如 ...

  6. 剑指offer(28)数组中出现次数超过一半的数

    题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...

  7. Oracle使用——oracle复制表

    复制表结构和数据 create table table_name_new as select * from table_name_old; 复制表结构 ; 复制表数据(全量插入数据) 两个表结构相同 ...

  8. 搭建Elasticsearch平台

    https://cloud.tencent.com/developer/article/1189282 https://blog.csdn.net/qq_34021712/article/detail ...

  9. 【Entity Framework】Revert the database to specified migration.

    本文涉及的相关问题,如果你的问题或需求有与下面所述相似之处,请阅读本文 [Entity Framework] Revert the database to specified migration. [ ...

  10. MAC之间共享屏幕

    A 机设置-->共享-->屏幕共享 ☑️勾选上,打开屏幕共享.   B 机 safari 里输入 vnc://ip 回车就可以共享屏幕了   转载请注明出处:https://www.cnb ...