Summary of some commonly used techniques in React (code)

不言

Release： 2018-09-07 17:45:19

Original

1630 people have browsed it

This article brings you a summary (code) of some commonly used techniques in React. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. React-classnames library

In practical applications, it is often encountered to add or change classes in component properties based on certain states. In order to better meet the needs of dynamic class switching, React provides the classNames tool

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

Copy after login

Usage:

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 });

Copy after login

Reference gitHub

二.qs.parse (), qs.stringify() usage method

qs is a package managed by an npm warehouse (can be installed through the npm install qs command, it is already available in Dva, so there is no need to install it).

The reference is: import qs from 'qs';
1. qs.parse() parses the URL into the form of an object

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));

Copy after login

As shown in the above code, the output result is as follows:

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

Copy after login

2. qs.stringify() serializes the object into the form of a URL and concatenates it with &

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));

Copy after login

The output is:

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

It should be noted here that the stringify method also exists in JSON, but the difference between the two is obvious, as shown below:

{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
uid=cs11&pwd=000000als&username=cs11&password=000000als

Copy after login

As shown above, the former is processed by JSON.stringify(param), and the latter is processed by Qs.stringify(param).

3. Quote Alibaba font library Iconfont

(1). Alibaba font library Iconfont--find the pictures you need--download to local

(2).Quote The font image

Summary of some commonly used techniques in React (code)

is quoted in index.html in public:

Use

in the component. Note: Although the above reference can be displayed, it will Error (Invalid DOM property `class`. Did you mean `className`?) So currently it can only be downloaded as an icon and then quoted

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="Summary of some commonly used techniques in React (code)" >

Copy after login

Related recommendations:

React High Summary of skills for using stage components

Summary of common PHP skills, PHP summary

The above is the detailed content of Summary of some commonly used techniques in React (code). For more information, please follow other related articles on the PHP Chinese website!