之前做项目的时候一直不知道有不知道有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. Linux下批量杀掉筛选进程

    在做项目的时候,由于情况要求,需要把服务器上符合某一条件的进程全部kill掉,但是又不能使用killAll直接杀掉某一进程名称包含的所有运行中的进程(即我们可能只需要杀掉某一类含有特定参数命令的进程) ...

  2. DOM_xss预备知识

    http://xuelinf.github.io/2016/05/18/%E7%BC%96%E7%A0%81%E4%B8%8E%E8%A7%A3%E7%A0%81-%E6%B5%8F%E8%A7%88 ...

  3. 关于php

    public private protected 修饰词 public: 公有类型 在子类中可以通过self::var调用public方法或属性,parent::method调用父类方法 在实例中可以 ...

  4. 本地资源_Asset

    数据 using System.Collections.Generic; using UnityEngine; public enum Enum_Test { A, B, C, } [System.S ...

  5. axios的基本概念及安装配置方法

    ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 1.从浏览器制作XMLHttpReques ...

  6. vue使用桌面Element-UI和移动端MintUI的UI框架

    vue使用桌面Element-UI和移动端MintUI的UI框架 element-uiElement - 网站快速成型工具http://element-cn.eleme.io/#/zh-CN 安装:n ...

  7. Python+OpenCV图像处理(十六)—— 轮廓发现

    简介:轮廓发现是基于图像边缘提取的基础寻找对象轮廓的方法,所以边缘提取的阈值选定会影响最终轮廓发现结果. 代码如下: import cv2 as cv import numpy as np def c ...

  8. docker性能测试

    测试环境: 操作系统:CentOS7.openstack nova-docker启动的centos7.openstack环境启动的centos7虚拟机 CPU:Intel(R) Xeon(R) CPU ...

  9. Heroku 云服务部署流程

    部署操作: heroic create bluefocus mkdir heroku && cd heroku --------------------- git init herok ...

  10. 如何退出vim

    按ESC键 按ESC键 按ESC键 然后: 最下面出现一条能输入命令的地方 输入冒号 输入冒号 输入冒号 然后输入命令: :w 保存文件但不退出 :w file 将修改另外保存到 file 中,不退出 ...