一.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 typesclassnames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'// other falsy values are just ignoredclassnames(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.可以传入动态classlet 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总结
以上就是react中常用一些技巧总结（代码）的详细内容。