React中常用一些技巧总结(代码)
本篇文章给大家带来的内容是关于React中常用一些技巧总结(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
一.React-classnames库
在实际应用中,经常会遇到根据某些状态增加或更改组件属性中类名的情况,为了更好地满足的class动态切换的需求,React提供了classNames工具
安装: npm install classnames --save 引入classnames库: import classnames from 'classnames'
用法:
1.基本使用 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' // lots of arguments of various types classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' // other falsy values are just ignored classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1' 2.也可以传入数组对象 var arr = ['b', { c: true, d: false }]; classNames('a', arr); // => 'a b c' 3.可以传入动态class let buttonType = 'primary'; classNames({ [`btn-${buttonType}`]: true });
参考gitHub
二.qs.parse()、qs.stringify()使用方法
qs是一个npm仓库所管理的包(可通过npm install qs命令进行安装,Dva中已经有,所以不需要安装).
引用的是:import qs from 'qs';
1. qs.parse()将URL解析成对象的形式
import Qs from 'qs'; let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0'; Qs.parse(url); console.log(Qs.parse(url));
如上面代码所示,输出结果如下:
{ method:'query_sql_dataset_data', projectId:'85', appToken:'7d22e38e-5717-11e7-907b-a6006ad3dba0' }
2. qs.stringify()将对象 序列化成URL的形式,以&进行拼接
import Qs from 'qs'; let obj= { method: "query_sql_dataset_data", projectId: "85", appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0", datasetId: " 12564701" }; Qs.stringify(obj); console.log(Qs.stringify(obj));
输出的是:
method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0&datasetId=%12564701
在这里需要注意的是,JSON中同样存在stringify方法,但是两者之间的区别是很明显的,如下所示:
{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"} uid=cs11&pwd=000000als&username=cs11&password=000000als
如上所示,前者是采用JSON.stringify(param)进行处理,后者是采用Qs.stringify(param)进行处理的。
三.引用阿里字体库Iconfont
(1).阿里字体库Iconfont--找自己需要的图片--下载到本地
(2).引用字体图片
在 public里面的index.html中引用:<link rel="stylesheet" type="text/css" href="./css/iconfont.css">
在组件中使用<i class="iconfont icon-qianbaoqiandaiyue"></i>
注意:上面这样引用虽然可以显示,但是会报错 (Invalid DOM property `class`. Did you mean `className`?) 所以目前只能下载成图标,然后进行引用了
constructor(props) { super(props); this.state = { "userImg": require('../../assets/img/user.png'), "address": require('../../assets/img/address.svg'), }; } <img src={this.state.userImg}/>
相关推荐:
以上就是React中常用一些技巧总结(代码)的详细内容,更多请关注其它相关文章!
上一篇: php文件缓存方法总结_php技巧