react+classnames
之前做项目的时候一直不知道有不知道有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的更多相关文章
- [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 ...
- react之只用classNames避免字符串拼接
之前在react当中使用了字符串拼接的方式来拼接类名的字符串,这种方法不仅不够方便,还会出现很多问题 使用classNames这个工具,可以省去拼接字符串的烦恼,大大提高开发效率 首先,最简单的使用方 ...
- react 通过 classnames 处理 多个class 的问题
react原生动态添加多个className会报错: import style from './style.css' <div className={style.class1 style.cla ...
- 如何使用classnames模块库为react动态添加class类样式
摘要 在react中添加动态的css时,传统的方式较为繁琐,今天刚好学习到一个模块库可以便捷的解决这个问题.对的,它就是“classnames”. classnames模块库 npm安装 npm in ...
- classnames & React & taro
classnames & React & taro classnames https://www.npmjs.com/package/classnames demo https://g ...
- react基础(1)
在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...
- 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)
一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...
- Redux教程2:链接React
通过前面的教程,我们有了简单的环境,并且可以运行Redux的程序,也对 如何编写Redux示例 有了初步的印象: 掌握了 使用Redux控制状态转移 ,继而驱动 React 组件发生改变,这才是学习R ...
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
随机推荐
- python数据结构-如何统计序列中元素的频度
如何统计序列中元素的频度 问题举例 如何找出随机序列[1, 5, 6, 5, 3, 2, 1, 0, 6, 1, 6]中出现频度最高的3个元素? 如何统计某篇英文文章中词频最高的5个单词? 将序列转换 ...
- poj 1164 深度优先搜索模板题
#include<iostream> //用栈进行的解决: #include<cstdio> #include<algorithm> #include<cst ...
- 游戏客户端Session的统一管理
看本系统文章需要些C语言.数据结构和网络基础知识! 说明:由于游戏服务器端会有成千上万的客户端进行连接请求,所以要求我们需要做一些简单的会话管理!如下图 1.简单说明 进行统一的分配和管理,就需要我们 ...
- 什么是软件开发工具包(SDK)
开发一个软件,需要经过编辑.编译.调试.运行几个过程. 编辑:使用编程语言编写程序代码的过程. 编译:如上一节所讲,就是将编写的程序进行翻译. 调试:程序不可能一次性编写成功,编写过程中难免会出现语法 ...
- MySQL插入去重命令_INSERT IGNORE INTO
之前在介绍INSERT INTO命令时,曾经提到,该命令在执行数据插入操作时,会在数据库中对元组的主键进行检测,若没有存在,则执行插入动作,若存在,则会报错. 而INSERT IGNORE INTO命 ...
- 运行软件出现:模块“msvcp110.dll”已加载,但找不到入口点DllRegister
根据百度大多数回答来说 1:先是出现 无法启动程序,因为计算机丢失mfc110.dll 尝试重新安装该程序以解决问题 错误处理:下载或者在别人电脑上拷一份 如:'msvcp110.dll‘ 这类文 ...
- 编码原则 之 Separation of Concerns
相关链接: Separation of Concerns 原文 The Art of Separation of Concerns Introduction In software engineeri ...
- ORM查询条件
模板: from django.db import models class Article(models.Model): title = models.CharField(max_length=20 ...
- Field笔记
一:时区的转换 1.navie 时间 和 aware 时间 navie 时间:不知道自己的时间表示的是哪个时区: aware 时间:知道自己的时间表示的是哪个时区. 2.pytz 库:用来处理时区的库 ...
- 伪分布式安装core-site.xml和hdfs-site.xml配置文件
hadoop的伪分布式安装流程如下所示: 其中core-site.xml和hdfs-site.xml是两个很重要的配置文件. core-site.xml <configuration> & ...