关灯
开启左侧

React常用的实用技巧

[复制链接]
SuperLee 发表于 2018-9-13 13:45:15 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
一.React-classnames库

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

  1. 安装:
  2. npm install classnames --save
  3. 引入classnames库:
  4. import classnames from 'classnames'
复制代码

用法:

  1. 1.基本使用

  2. classNames('foo', 'bar'); // => 'foo bar'
  3. classNames('foo', { bar: true }); // => 'foo bar'
  4. classNames({ 'foo-bar': true }); // => 'foo-bar'
  5. classNames({ 'foo-bar': false }); // => ''
  6. classNames({ foo: true }, { bar: true }); // => 'foo bar'
  7. classNames({ foo: true, bar: true }); // => 'foo bar'

  8. // lots of arguments of various types
  9. classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

  10. // other falsy values are just ignored
  11. classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

  12. 2.也可以传入数组对象

  13. var arr = ['b', { c: true, d: false }];
  14. classNames('a', arr); // => 'a b c'

  15. 3.可以传入动态class

  16. let buttonType = 'primary';
  17. classNames({ [`btn-${buttonType}`]: true });
复制代码

在dva中使用

  1. import classnames from 'classnames'
  2. const nameI  = "anticon anticon-user";
  3. <i className={classnames({ [`${nameI}`]: true })}>
复制代码
二.qs.parse()、qs.stringify()使用方法

qs是一个npm仓库所管理的包(可通过npm install qs命令进行安装,Dva中已经有,所以不需要安装).

引用的是:import  qs from 'qs';
1. qs.parse()将URL解析成对象的形式

  1. import  Qs from 'qs';
  2. let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';
  3. Qs.parse(url);
  4. console.log(Qs.parse(url));
复制代码

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

  1. {
  2.         method:'query_sql_dataset_data',
  3.         projectId:'85',
  4.         appToken:'7d22e38e-5717-11e7-907b-a6006ad3dba0'
  5. }
复制代码

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

  1. import  Qs from 'qs';
  2. let obj= {
  3.      method: "query_sql_dataset_data",
  4.      projectId: "85",
  5.      appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",
  6.      datasetId: " 12564701"
  7.    };
  8. Qs.stringify(obj);
  9. console.log(Qs.stringify(obj));
复制代码

输出的是:

method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0&datasetId=%12564701

在这里需要注意的是,JSON中同样存在stringify方法,但是两者之间的区别是很明显的,如下所示:

  1. {"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
  2. uid=cs11&pwd=000000als&username=cs11&password=000000als
复制代码

如上所示,前者是采用JSON.stringify(param)进行处理,后者是采用Qs.stringify(param)进行处理的。

三.引用阿里字体库Iconfont

(1).阿里字体库Iconfont--找自己需要的图片--下载到本地

(2).引用字体图片

20180907153834114.png

在 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`?) 所以目前只能下载成图标,然后进行引用了

  1. constructor(props) {
  2.         super(props);
  3.         this.state = {
  4.                 "userImg": require('../../assets/img/user.png'),
  5.                 "address": require('../../assets/img/address.svg'),
  6.         };
  7. }
  8. <img src={this.state.userImg}/>
复制代码


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )