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 ...
随机推荐
- qrcode插件生成二维码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- Cocos Creator - 入门教程项目 - 博客频道 - CSDN.NET
3457 教程司令部 [20160418] | Cocos Creator - CocoaChina CocoaChina_让移动开发更简单cocoachina.com 2033 Cocos Crea ...
- Linux. 计划任务 时间格式
Linux. 计划任务 时间格式 在linux中执行指令:cat /etc/crontab 结果,如下图所示: 结果一目了然,不多说. 如有问题,欢迎纠正!!! 如有转载,请标明源处:https:// ...
- windows程序设计 vs2012 新建win32项目
1.文件->新建->项目 2.选择win32项目,确定 3.下一步 4.选择windows应用程序,选中空项目,安全开发生命周期不选.点击完成. 5.空项目建好了.
- Go 初体验 - 死锁的几种情况
go 语言里,channel 是一个重要的对象和概念,它是通信的基础实现 如何实例化: ch := make(chan int) 由 channel 通信引起的死锁共有3种: 第一种是因为给 ch 推 ...
- VCS
timing check相关的, +notimingcheck命令,可以用在compile时,也可以用在run time的时候, 都是将检查timing的系统函数,都disable掉了, 加在comp ...
- flask的简单使用
一.Flask中的CBV from flask import Flask, render_template from flask import views app = Flask(__name__, ...
- ORA-12805: parallel query server died unexpectedly ORA-04030 (sort subheap,sort key) 原因排查与解决方法
今日,某服务器pga调整为30G,_pga_max_size调整为8G之后(原来是2G,但是one passes语句较多,性能太低),执行出现ORA-12805: parallel query ser ...
- Win32汇编学习(10):对话框(1)
现在我们开始学习一些有关GUI编程的有趣的部分:以对话框为主要界面的应用程序. 理论: 如果您仔细关注过前一个程序就会发现:您无法按TAB键从一个子窗口控件跳到另一个子窗口控件,要想转移的话只有 用鼠 ...
- Machine Learning--week4 神经网络的基本概念
之前的学习成果并不能解决复杂的非线性问题 Neural Networks Sigmoid(logistic) activation function: activation function is a ...