React でよく使用されるテクニックのまとめ (コード)

この記事は、React でよく使用されるテクニックの概要 (コード) を示しています。必要な方は参考にしていただければ幸いです。

1. React-classnames ライブラリ

実際のアプリケーションでは、動的なクラス切り替えのニーズに合わせてコンポーネント属性のクラス名が追加または変更されることがよくあります。 , 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 を参照

II.qs.parse(), qs.stringify() 使用法

qs は npm ウェアハウスによって管理されるパッケージです ( npm install qs コマンド インストールします。すでに Dva に含まれているため、インストールする必要はありません)。

は、次のことを指します。上記のコードに示すようにオブジェクト

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=%12564701

ここで、stringify メソッドは JSON にも存在しますが、以下に示すように 2 つの違いは明らかであることに注意してください。

りー

上記のように、前者は JSON.stringify( param) を使用して処理され、後者は Qs.stringify(param) を使用して処理されます。

3. Alibaba フォント ライブラリの Iconfont を引用します

(1)。必要な画像を見つけてローカルにダウンロードします

(2)。 .html で引用:

コンポーネント内で

注: 上記の参照は表示できますが、エラー (DOM プロパティ `class` が無効です。`className` のことですか?) が報告されるため、現在はアイコンとしてのみダウンロードできます。そしてそれを引用してください

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

関連する推奨事項:

React の高レベルのコンポーネント使用スキルの概要

一般的な PHP スキルの概要、PHP の概要

以上がReact でよく使用されるテクニックのまとめ (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。