一.React-classnames库

在实际应用中，经常会遇到根据某些状态增加或更改组件属性中类名的情况，为了更好地满足的class动态切换的需求，React提供了classNames工具

安装：
npm install classnames --save
引入classnames库：
import classnames from &#39;classnames&#39;

登录后复制

用法：

1.基本使用

classNames(&#39;foo&#39;, &#39;bar&#39;); // => &#39;foo bar&#39;
classNames(&#39;foo&#39;, { bar: true }); // => &#39;foo bar&#39;
classNames({ &#39;foo-bar&#39;: true }); // => &#39;foo-bar&#39;
classNames({ &#39;foo-bar&#39;: false }); // => &#39;&#39;
classNames({ foo: true }, { bar: true }); // => &#39;foo bar&#39;
classNames({ foo: true, bar: true }); // => &#39;foo bar&#39;

// lots of arguments of various types
classNames(&#39;foo&#39;, { bar: true, duck: false }, &#39;baz&#39;, { quux: true }); // => &#39;foo bar baz quux&#39;

// other falsy values are just ignored
classNames(null, false, &#39;bar&#39;, undefined, 0, 1, { baz: null }, &#39;&#39;); // => &#39;bar 1&#39;

2.也可以传入数组对象

var arr = [&#39;b&#39;, { c: true, d: false }];
classNames(&#39;a&#39;, arr); // => &#39;a b c&#39;

3.可以传入动态class

let buttonType = &#39;primary&#39;;
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 &#39;qs&#39;;
let url = &#39;method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0&#39;;
Qs.parse(url);
console.log(Qs.parse(url));

登录后复制

如上面代码所示,输出结果如下:

{
	method:&#39;query_sql_dataset_data&#39;,
	projectId:&#39;85&#39;,
	appToken:&#39;7d22e38e-5717-11e7-907b-a6006ad3dba0&#39;
}

登录后复制

2. qs.stringify()将对象序列化成URL的形式，以&进行拼接

import  Qs from &#39;qs&#39;;
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中引用：

在组件中使用

注意：上面这样引用虽然可以显示，但是会报错（Invalid DOM property `class`. Did you mean `className`?）所以目前只能下载成图标，然后进行引用了

constructor(props) {
	super(props);
	this.state = {
		"userImg": require(&#39;../../assets/img/user.png&#39;),
		"address": require(&#39;../../assets/img/address.svg&#39;),
	};
}
<img  src={this.state.userImg}/ alt="React中常用一些技巧总结（代码）" >

登录后复制