React 컴포넌트 간의 통신 방법에 대한 간략한 소개

이 글은 주로 React 개발 튜토리얼에서 React 컴포넌트 통신에 대한 자세한 설명을 소개하고 있습니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴보겠습니다.

지난 이틀 동안 React를 배웠는데 컴포넌트 통신에 대한 지식이 꽤 많고 매우 중요하다고 느껴서 오늘은 몇 가지 메모를 추가하겠습니다.

부모-자식 컴포넌트 통신

통신 수단

부모 컴포넌트는 자식 컴포넌트에 필요한 prop만 자식 컴포넌트에 전달하면 됩니다. 하위 구성 요소는 this.props를 직접 전달하여 사용합니다.

Communication content

더 언급해야 할 것은 하위 컴포넌트의 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 || &#39;滴滴&#39;}</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 (
   <p className="App">
    <HeaderBar title="滴滴打车" renderLeftComponent={leftIcon} />
   </p>
  );
 }
}

자식-부모 구성 요소 통신

부모-자식 구성 요소 통신 수단은 하위 구성 요소의 props를 통해 이루어집니다. - 상위 구성 요소 통신은 상위 구성 요소가 하위 구성 요소를 사용하여 수행하는 작업입니다. 임시로 배운 두 가지 방법이 있습니다

콜백 함수 사용

상위 구성 요소는 메서드를 전달합니다. 하위 구성 요소는 props를 통해 하위 구성 요소 데이터를 props 메소드를 통해 전달합니다.

Use ref

상위 구성 요소는 refs

를 통해 하위 구성 요소의 속성을 호출합니다. Cross-level 컴포넌트 통신

React에서는 속성이 반복적으로 사용되어 여러 하위 컴포넌트에 존재하는 경우 이때 props를 레벨별로 전달하면 다단계 접근이 가능하지만 이로 인해 코드를 매우 혼란스럽게 만드는 문제. React China에서는 컨텍스트를 사용하여 상위-하위 구성 요소를 구현할 수도 있습니다. 동일 레벨 컴포넌트 통신

형제 컴포넌트 간의 통신은 여전히 ​​여러 상위 컴포넌트를 사용하여 중개자로서 상위 컴포넌트를 거쳐야 합니다. - 하위 컴포넌트 통신, 전송해야 할 데이터는 다음 상태에 놓입니다. 프로젝트의 상위 구성요소이며 변경 시 자동으로 동기식으로 전송될 수 있습니다.

위 내용은 React 컴포넌트 간의 통신 방법에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!