react 개발 튜 토리 얼 의 React 구성 요소 간 통신 방식

이틀 동안 React 를 배 웠 는데 구성 요소 통신 이라는 곳 은 지식 이 많 고 중요 하 다 고 생각 하기 때문에 오늘 은 작은 필 기 를 추가 합 니 다.
부자 모듈 통신
통신 수단
이것 은 가장 흔히 볼 수 있 는 통신 방식 입 니 다.부모 구성 요 소 는 하위 구성 요소 에 필요 한 props 를 하위 구성 요소 에 전달 하고 하위 구성 요 소 는 this.props 를 통 해 직접 사용 합 니 다.
통신 내용
더 많은 것 은 하위 구성 요소 의 props 를 합 리 적 으로 설정 하 는 방법 입 니 다.하위 구성 요 소 를 재 활용 성 이 강 한 유 니 버 설 구성 요소 로 설계 하려 면 재 활용 할 수 있 는 부분 을 추상 화 해 야 합 니 다.추상 화 된 props 는 두 가지 로 형성 되 고 하 나 는 간단 한 변수 이 며 다른 하 나 는 추상 적 으로 특정한 논리 함 수 를 처리 해 야 합 니 다.
Header 구성 요 소 를 예 로 들 면

//HeaderBar.jsx    

import React, { Component } from 'react';

class Header extends Component {
  constructor() {
    super();
    this.handleClick = (e) => {
      console.log(this)
    }
  }

  renderLeftComponent() {

    let leftDOM = {};
    if (this.props.renderLeftComponent) {
      return this.props.renderLeftComponent();
    }

    if (this.props.showBack) {
      let backFunc = this.props.onBack || this.goBack;
      leftDOM = (<a onClick={backFunc.bind(this)}><i className="icon left-icon icon-left-arrow"></i></a>);
    }
    return leftDOM;
  }
  

  renderRightComponent() {
    if (this.props.renderRightComponent) {
      return this.props.renderRightComponent();
    }
  }

  goBack() {
    alert("     ")
  }

  render() {
    return (
      <header className="header-bar">
        {this.renderLeftComponent()}
        <span>{this.props.title || '  '}</span>
        {this.renderRightComponent()}
      </header>
    );
  }
}

export default Header;

//        App.jsx
import HeaderBar from "./components/Header";

let leftIcon = function () {
 return (
  <a><i className="icon left-icon icon-left-haha"></i>    </a>
 )
}
class App extends Component {

 render() {
  return (
   <div className="App">
    <HeaderBar title="    " renderLeftComponent={leftIcon} />
   </div>
  );
 }
}

하위 부모 구성 요소 통신
부모-하위 구성 요소 통신 의 수단 은 하위 구성 요 소 를 통 해 props 는 하위 구성 요소 가 부모 구성 요 소 를 사용 하 는 것 이 고,하위-부모 구성 요소 가 통신 하 는 것 이 며,부모 구성 요소 가 하위 구성 요 소 를 사용 하 는 것 이 며,일시 적 으로 알 수 있 는 두 가지 방법 입 니 다.
리 셋 함 수 를 이용 하 다
부모 구성 요 소 는 props 를 통 해 하위 구성 요 소 를 전달 하고,하위 구성 요 소 는 props 방법 을 통 해 하위 구성 요소 데 이 터 를 부모 구성 요소 에 전달 합 니 다.
이용 하 다
부모 구성 요 소 는 refs 를 통 해 하위 구성 요소 의 속성 을 호출 합 니 다.
크로스 모듈 통신
React 에서 하나의 속성 이 반복 적 으로 사용 되 고 여러 개의 하위 구성 요소 가 존재 할 때 우 리 는 props 1 급 1 급 을 통 해 전달 하면 다 층 적 인 방문 을 실현 할 수 있 습 니 다.그러나 이렇게 문제 가 발생 하면 코드 를 매우 혼 란 스 럽 게 할 수 있 습 니 다.React 중국 년 에 우 리 는 context 를 사용 하여 크로스 부자 구성 요소 간 의 통신 을 실현 할 수 있 습 니 다.
react 에서 context 를 벌레 구멍 이 라 고 합 니 다.

// Component   
class parentComponent extends React.Component {
  
  // add the following property
  static childContextTypes = {
    color: React.PropTypes.string
  }
  
  //       
  getChildContext() {
    return {
      color: "#f00"
    }
  }
  
  render() {
    <div>
      <Child1 />
    </div>
  }
}


// Component Child1
class Child1 extends React.Component {
  //       
  static contextTypes = {
    color: React.PropTypes.string
  }
  
  render() {
    <div>{this.context.color}</div>
  }
}

동급 모듈 통신
동급 구성 요소 간 의 통신 은 부모 구성 요 소 를 통 해 중개 해 야 합 니 다.여러 번 부모-하위 구성 요 소 를 이용 하여 통신 해 야 합 니 다.프로젝트 는 부모 구성 요소 의 state 에 전달 해 야 합 니 다.변동 시 자동 으로 동기 화 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.