Résumé de quelques techniques couramment utilisées dans React (code)

Le contenu de cet article est un résumé (code) de certaines techniques couramment utilisées dans React. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Bibliothèque React-classnames

Dans les applications pratiques, il est souvent rencontré d'ajouter ou de modifier des classes dans les propriétés des composants en fonction de certains états. Afin de mieux répondre aux besoins de changement de classe dynamique, React fournit l'outil classNames

安装：
npm install classnames --save
引入classnames库：
import classnames from 'classnames'

Utilisation :

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

Se référer à gitHub

2 Comment utiliser .qs.parse() et qs.stringify()

qs est un package géré par l'entrepôt npm (peut être installé via la commande npm install qs, il est déjà disponible dans Dva, il n'est donc pas nécessaire pour l'installer).

fait référence à : import qs from 'qs';
1. qs.parse() analyse l'URL sous la forme d'un objet

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

As. montré dans le code ci-dessus, la sortie Le résultat est le suivant :

{
	method:'query_sql_dataset_data',
	projectId:'85',
	appToken:'7d22e38e-5717-11e7-907b-a6006ad3dba0'
}

2. qs.stringify() sérialise l'objet sous la forme d'une URL et le raccorde avec &

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

Le résultat est :

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

Il convient de noter ici que la méthode stringify existe également en JSON , mais la différence entre les deux est évidente. Comme indiqué ci-dessous :

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

Comme indiqué ci-dessus, le premier est traité par JSON.stringify(param) et le second est traité par Qs.stringify(param). ).

3. Citer la bibliothèque de polices Alibaba Iconfont

(1). Bibliothèque de polices Alibaba Iconfont - trouvez les images dont vous avez besoin - téléchargez-les sur votre

(2). L'image de la police

est citée dans index.html en public :

Utilisez

dans le composant. Remarque : bien que la référence ci-dessus puisse être affichée, ce sera une erreur (propriété DOM `class` non valide. Vouliez-vous dire `className` ?) Donc actuellement, vous ne pouvez le télécharger que sous forme d'icône, puis le référencer

constructor(props) {
	super(props);
	this.state = {
		"userImg": require('../../assets/img/user.png'),
		"address": require('../../assets/img/address.svg'),
	};
}
<img  src={this.state.userImg}/ alt="Résumé de quelques techniques couramment utilisées dans React (code)" >

Recommandations associées :

Résumé des compétences d'utilisation des composants de haut niveau React

Résumé des compétences PHP courantes, résumé PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!