Zusammenfassung einiger häufig verwendeter Techniken in React (Code)

Der Inhalt dieses Artikels ist eine Zusammenfassung (Code) einiger häufig verwendeter Techniken in React. Ich hoffe, dass er für Freunde in Not hilfreich ist.

1. React-classnames-Bibliothek

In praktischen Anwendungen kommt es häufig vor, dass Klassen in Komponenteneigenschaften basierend auf bestimmten Zuständen hinzugefügt oder geändert werden Um den Anforderungen des dynamischen Klassenwechsels besser gerecht zu werden, stellt React das classNames-Tool

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

bereit. Verwendung:

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

Referenz gitHub

II.qs.parse (), qs .stringify()-Verwendungsmethode

qs ist ein Paket, das von einem npm-Warehouse verwaltet wird (es kann über den Befehl npm install qs installiert werden. Es ist bereits in Dva verfügbar, sodass keine Installation erforderlich ist).

Die Referenz lautet: import qs from 'qs';
1. qs.parse() analysiert die URL in die Form eines Objekts

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

Wie im obigen Code gezeigt, Das Ausgabeergebnis lautet wie folgt:

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

2. qs.stringify() serialisiert das Objekt in die Form einer URL und verbindet es mit &

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

Die Ausgabe lautet:

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

Hier ist zu beachten, dass die Stringify-Methode auch in JSON existiert, der Unterschied zwischen den beiden jedoch offensichtlich ist unten gezeigt:

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

Wie oben gezeigt, wird Ersteres von JSON.stringify(param) und Letzteres von Qs.stringify(param) verarbeitet.

3. Alibaba-Schriftbibliothek Iconfont zitieren

(1). Finden Sie die benötigten Bilder – laden Sie sie lokal herunter

(2). Das Schriftbild

wird in index.html öffentlich zitiert:

Verwenden Sie

in der Komponente. Hinweis: Obwohl die obige Referenz angezeigt werden kann, Es wird ein Fehler angezeigt (Ungültige DOM-Eigenschaft „Klasse“. Meinten Sie „Klassenname“?) Daher können Sie es derzeit nur als Symbol herunterladen und es dann zitieren

constructor(props) {
	super(props);
	this.state = {
		"userImg": require('../../assets/img/user.png'),
		"address": require('../../assets/img/address.svg'),
	};
}
<img  src={this.state.userImg}/ alt="Zusammenfassung einiger häufig verwendeter Techniken in React (Code)" >

Verwandte Empfehlungen:

React High Zusammenfassung der Fähigkeiten zur Verwendung von Bühnenkomponenten

Zusammenfassung allgemeiner PHP-Kenntnisse, PHP-Zusammenfassung

Das obige ist der detaillierte Inhalt vonZusammenfassung einiger häufig verwendeter Techniken in React (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!