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

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

1. React-classnames 라이브러리

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

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

Usage:

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

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

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에도 존재한다는 점에 유의해야 하지만 두 메서드의 차이점은 아래와 같습니다.

{"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에서 인용:

구성 요소에서

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

constructor(props) {
	super(props);
	this.state = {
		"userImg": require('../../assets/img/user.png'),
		"address": require('../../assets/img/address.svg'),
	};
}
<img  src={this.state.userImg}/ alt="React에서 일반적으로 사용되는 몇 가지 기술 요약(코드)" >

관련 권장 사항:

React 고급 구성 요소 사용 기술 요약

일반적인 PHP 기술 요약, PHP 요약

위 내용은 React에서 일반적으로 사용되는 몇 가지 기술 요약(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!