Eine kurze Einführung in die Kommunikationsmethoden zwischen React-Komponenten

In diesem Artikel wird hauptsächlich die detaillierte Erklärung der React-Komponentenkommunikation im React-Entwicklungs-Tutorial vorgestellt. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Nachdem ich in den letzten zwei Tagen React studiert habe, habe ich das Gefühl, dass es ziemlich viel Wissen über Komponentenkommunikation gibt und es sehr wichtig ist, also werde ich ein paar Anmerkungen hinzufügen Heute.

Eltern-Kind-Komponentenkommunikation

Kommunikationsmittel

Dies ist die gebräuchlichste Kommunikationsmethode. Die übergeordnete Komponente muss nur die von der untergeordneten Komponente benötigten Requisiten an die untergeordnete Komponente übergeben, und die untergeordnete Komponente verwendet sie direkt über this.props.

Kommunikationsinhalt

Darüber hinaus ist zu erwähnen, wie die Requisiten von Unterkomponenten richtig eingestellt werden, wenn Sie die Unterkomponente entwerfen möchten In eine komplexe universelle Komponente mit starker Benutzerfreundlichkeit müssen die wiederverwendbaren Teile abstrahiert werden. Die abstrahierten Requisiten können in zwei Typen umgewandelt werden, einer ist eine einfache Variable und der andere wird abstrahiert, um bestimmte logische Funktionen zu verarbeiten.

Nehmen Sie die Header-Komponente als Beispiel

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

Kind-Eltern-Komponente Kommunikation

Die Kommunikation zwischen Eltern und Kind erfolgt über die Requisiten der untergeordneten Komponente. Die untergeordnete Komponente kommuniziert über die übergeordnete Komponente Komponente, die die untergeordnete Komponente verwendet. Zwei Methoden, die Sie zunächst verstehen sollten.

Verwenden Sie die Rückruffunktion.

Die übergeordnete Komponente übergibt eine Methode über Requisiten an die untergeordnete Komponente. und die untergeordnete Komponente übergibt die Daten der untergeordneten Komponente über die props-Methode. An die übergeordnete Komponente übergeben

Verwenden Sie ref

Die übergeordnete Komponente ruft die Eigenschaften des untergeordneten Elements auf Komponente durch Refs

Ebenenübergreifende Komponentenkommunikation

In React, wenn eine Eigenschaft wiederholt verwendet wird und in mehreren Unter- Komponenten: Wenn wir zu diesem Zeitpunkt Requisiten Ebene für Ebene übergeben, können wir viel hierarchischen Zugriff erreichen, aber ein Problem wie dieses besteht darin, dass der Code dadurch sehr verwirrend wird. In React China können wir auch den Kontext verwenden, um die Kommunikation zwischen ihnen zu erreichen übergeordnete und untergeordnete Komponenten auf mehreren Ebenen; Komponentenkommunikation auf Ebene

Zwischen Komponenten auf derselben Ebene Die Kommunikation muss weiterhin über die übergeordnete Komponente als Vermittler erfolgen. Mithilfe mehrerer übergeordneter und untergeordneter Komponentenkommunikationen stellt das Projekt die Daten bereit Dies muss im Status der übergeordneten Komponente übertragen werden und kann automatisch synchron übertragen werden, wenn es sich ändert.

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in die Kommunikationsmethoden zwischen React-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!