React 속성이란 무엇입니까? 반응 속성, 이벤트 및 공유 사용에 대한 자세한 설명

이번 글에서는 주로 react에서의 속성 사용과 React에서의 이벤트 사용 및 공유에 대해 설명합니다. 다음으로 이 글을 읽어보겠습니다.

이 글에서는 주로 React 전용 태그의 사용에 대해 설명합니다. React 공유의 획득 및 사용은 다음과 같습니다.

• React의 State 속성

• React의 Props 속성

• React 이벤트 바인딩 및 데이터 양방향 상호 작용

• React 컴포넌트 재사용 및 검증

• React 구성요소 참조

• 독립적인 React 구성요소 간의 공유 작업 믹스인

1, 상태 속성

• React의 상태 머신, 자체 모듈의 데이터를 변경하는 데 사용됨

• 상태 범위만; 현재 클래스에 속하며 다른 모듈을 오염시키지 않습니다.

• Initialization: this.state = {username: “XXX”};

• 초기화된 상태 설정은

• Modify 상태에 있습니다. : this.setState({username: “AAA”});

• 요약: state는 모듈 자체 속성의 설정입니다.

2. Props 속성

• props는 모듈의 외부 속성입니다(상위-하위 수준 데이터 전송).

• 전송 방법에는 매개변수 설정이 필요합니다.

• 수신 모듈에서 사용하세요. .props.xxx;

3. 이벤트 바인딩과 데이터 간의 양방향 상호 작용

3.1 이벤트 바인딩

• 첫 번째 유형: this.focus = this.focus.bind( );

• 또는 호출 바인딩: onClick={this.focus.bind(this,99)}
  

• (바인드 값은 템플릿을 바인딩하는 데 사용되며 99는 매개 변수 전달에 사용됩니다)

3.2 데이터의 양방향 바인딩

• 부모에서 자식으로 전달됨(es5는 다음과 같습니다)

• 하위 페이지는 하위 페이지를 호출하여 매개변수를 상위 페이지에 전달합니다
  

• 상위 페이지에서 전달된 이벤트 props는 그룹 간 매개변수 전송에 사용됩니다

• 실시간 모니터링을 위해 onChange 이벤트 사용

3.3 데이터 요청 방법

• 전통적인 AJAX 방법

• ES6에서 제공 promise

promise.then( null, function( reason ){
    /* rejection */} );// 等价于promise.catch( function( reason ){
    /* rejection */} );

• ES6에서 제공하는 약속 - Fetch를 사용하여 HTTP 요청 구현

fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOptions).then(response => response.json()).then(json => this.setState({news: json}));

4. 구성 요소 재사용 및 확인

4.1 Props 확인

• 방법 1: const 유형 = {userid: React. PropTypes.number.isRequired}; BodyIndex.propTypes = 유형;

• 방법 2: BodyIndex.propTypes = { userid: React.PropTypes.number.isRequired };

• 참고: propTypes는 v15.5 버전 이후에 있습니다. 즉, 사용하려면 환경을 설치해야 합니다. npm install prop-types –save
  

• 다음과 같이 소개합니다. import PropTypes from 'prop-types';

• BodyIndex.propTypes = { userid: PropTypes.number.isRequired };

4.2 기본 Props 값

• Definition: const defaultNum = {username: "기본 이름"};

• Use: BodyIndex.defaultProps = defaultNum; 자세한 내용을 보려면 여기로 가십시오. PHP 중국어 웹사이트React 참조 매뉴얼열에서 알아보기)

4.3 구성 요소 재사용—매개 변수 사용

<BodyChild {...this.props} sex={"XXX}/>

5. 구성 요소 참조—태그 가져오기

• 방법 1 : 태그를 가져오는 원래 방법: var myButton = document.getElementById("submitButton"); myButton.style.color = "red";

• 레이블에 ref 속성 설정: <input ref="submitButton" type="button" value="提交数据"/>

• 가져오기 및 설정 방법 2: this.refs .submitButton .style.color = "red";

• Refs는 구성 요소 내부의 DOM 노드에 액세스하는 신뢰할 수 있는 유일한 방법입니다.

• 코드가 끝나면 Refs는 하위 구성 요소에 대한 원본 참조를 자동으로 삭제합니다.

  렌더링 또는 렌더링 전에 Refs를 호출하지 마세요.

• Refs를 남용하지 마세요. > 플러그인 가져오기:

  'react-mixin'에서 ReactMixin을 가져옵니다.
새 공유 파일 만들기 - 다수의 공개 함수 또는 속성 저장

필요할 때마다 사용하세요. component
• './mixin.js'에서 MixinLog를 가져옵니다.

• 공유 객체 컬렉션 MixinLog를 현재 구성 요소 프로토타입에 할당합니다: ReactMixin(BodyIndex.prototype, MixinLog);

• MixinLog.log()와 같이 다양한 요구 사항에 해당하는 함수 호출을 만드세요.

• 특징: 페이지와 유사한 라이프 사이클을 가지며, 호출된 후 여러 번 실행됩니다.

7. 요약

이 글에서는 주로 React의 상태 속성 사용과 구성 요소 확인 및 재사용에 대해 간략하게 설명합니다. 소프트웨어를 다운로드한 후 명령 패널을 통해 현재 폴더로 이동하면 됩니다. npm install을 실행합니다. 모든 환경을 설치한 후 webpack –watch를 실행하면 프로젝트를 실행할 준비가 됩니다.

이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트React 사용자 매뉴얼 칼럼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 React 속성이란 무엇입니까? 반응 속성, 이벤트 및 공유 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!