React常用的实用技巧

我会带着你远行 2021-09-16 06:44 303阅读 0赞

# 一.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 });

[参考][Link 1][gitHub][Link 1]

在dva中使用

import classnames from 'classnames'
    const nameI  = "anticon anticon-user";
     <i className={classnames({ [`${nameI}`]: true })}>

# 二.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][Iconfont]\--找自己需要的图片--下载到本地

(2).引用字体图片

![70][]

在 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}/>

[Link 1]: https://github.com/JedWatson/classnames
[Iconfont]: http://www.iconfont.cn/search?q=home
[70]: /images/20210813/21bb72c3e6f846a3a6ad8a173d414d3d.png