React에서 일반적으로 사용되는 몇 가지 기술 요약(코드)

不言

풀어 주다： 2018-09-07 17:45:19

원래의

1630명이 탐색했습니다.

이 글은 React에서 일반적으로 사용되는 몇 가지 기술에 대한 요약(코드)을 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. React-classnames 라이브러리

실제 응용 프로그램에서는 동적 클래스 전환 요구 사항을 더 잘 충족하기 위해 구성 요소 속성의 클래스 이름이 추가되거나 변경되는 경우가 많습니다. , React는 classNames 도구를 제공합니다

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

로그인 후 복사

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

로그인 후 복사

gitHub

II.qs.parse()를 참조하세요. qs.stringify() 사용법

qs는 npm Warehouse에서 관리하는 패키지입니다( npm install qs 명령 설치합니다. 이미 Dva에 있으므로 설치할 필요가 없습니다.)

는 import qs from 'qs'를 의미합니다.
1. qs.parse()는 URL을 다음 형식으로 구문 분석합니다. 위 코드에 표시된 대로 객체

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

로그인 후 복사

의 경우 출력 결과는 다음과 같습니다.

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

로그인 후 복사

2. qs.stringify()는 객체를 URL 형식으로 직렬화하고 &

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

로그인 후 복사

로 연결합니다. 출력은 다음과 같습니다.

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

여기서 stringify 메서드가 JSON에도 존재한다는 점에 유의해야 하지만 두 메서드의 차이점은 아래와 같습니다.

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

로그인 후 복사

위와 같이 전자는 JSON.stringify(param)을 사용하고, 후자는 Qs.stringify(param)을 사용하여 처리합니다.

3. Alibaba 글꼴 라이브러리 Iconfont

(1) - 필요한 사진을 찾아 로컬로 다운로드하세요

(2) 공개 색인에서 글꼴 사진을 인용하세요. .html에서 인용:

구성 요소에서 React에서 일반적으로 사용되는 몇 가지 기술 요약(코드)

참고: 위 참조는 표시될 수 있지만 오류를 보고합니다(잘못된 DOM 속성 `class`. `className`을 의미합니까?). 따라서 현재는 아이콘으로만 다운로드할 수 있습니다. 그런 다음 인용하세요

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="React에서 일반적으로 사용되는 몇 가지 기술 요약(코드)" >

로그인 후 복사