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= 564701

在這裡需要注意的是，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('../../assets/img/user.png'),
		"address": require('../../assets/img/address.svg'),
	};
}
<img  src={this.state.userImg}/ alt="React中常用一些技巧總結（程式碼）" >

 相關推薦：

React高階組件使用技巧總結

PHP常用技巧總結，php總結

以上是React中常用一些技巧總結（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！