Drei Möglichkeiten zur Kommunikation zwischen React-Komponenten (einfach und benutzerfreundlich)

Einer der wichtigsten Inhalte des React-Wissens ist die Kommunikation zwischen Komponenten. Hier sind einige häufig verwendete Methoden zur Komponentenkommunikation, kombiniert mit Beispielen, leicht verständlich und eine empfohlene Sammlung.

1. Kommunikation zwischen Eltern- und Kindkomponenten

Prinzip: Die übergeordnete Komponente kommuniziert mit der untergeordneten Komponente über Requisiten (im Unterschied zu den Requisiten in Vue), und die untergeordnete Komponente kommuniziert mit der übergeordneten Komponente über Rückrufereignisse.

Erstellen Sie zunächst eine übergeordnete Komponente Parent.js und eine untergeordnete Komponente Children.js. Die Beziehung zwischen den beiden ist eine direkte Eltern-Kind-Beziehung.

Die übergeordnete Komponente von Parent.js sieht wie folgt aus. Sie gibt der übergeordneten Komponente einen Standardstatus und führt die untergeordnete Komponente ein. Durch Hinzufügen von toChildren={this.state.msg} zur untergeordneten Komponente werden Eigenschaften an die untergeordnete Komponente übergeben.

importiere React von „react“;
importiere { Button } von „element-react“;
Kinder aus „./Children“ importieren;
 
Klasse Parent erweitert React.Component {
  Konstruktor(Requisiten) {
	super(Requisiten);
	dieser.Zustand = {
		msg:'Übergeordnete Komponente an untergeordnete Komponente übergeben'
	};
    diese.changeMsg = diese.changeMsg.binden(diese)
  }
  Nachricht ändern(){
    dies.setState({
      msg:'Die übergeordnete Komponente wird an die untergeordnete Komponente übergeben (der Inhalt nach der Änderung)'
    })
  }
  machen(){
    zurückkehren (
      <div Stil = {{Hintergrundfarbe:'#f7ba2a',Padding:'20px',Breite:'500px',Rand:'auto',Textausrichtung:'Mitte'}}>
        <p>Beispiel für die Kommunikation zwischen übergeordneten und untergeordneten Komponenten</p>
        <Button onClick={this.changeMsg}>Vater zu Sohn</Button>
        <Kinder zuKinder={this.state.msg}></Kinder>
      </div>
    )
  }
}
 
Standard-Übergeordnetes Element exportieren

Die untergeordnete Komponente von Children.js sieht wie folgt aus. Der Anfangszustand erhält den Wert, der von der übergeordneten Komponente über Eigenschaften übergeben wird.

importiere React von „react“;
 
Klasse Children erweitert React.Component {
  Konstruktor(Requisiten) {
	super(Requisiten);
	dieser.Zustand = {
		msg:this.props.toChildren //Den von der übergeordneten Komponente über die Props übergebenen Wert abrufen };
  }
  machen(){
    zurückkehren (
      <div Stil = {{Hintergrundfarbe:'#13ce66',Padding:'10px',Breite:'200px',Rand:'auto',RandTop:'20px'}}>
        <p>Von der übergeordneten Komponente übergeben:</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
      </div>
    )
  }
}
 
Standard-Untergeordnete Elemente exportieren 

Hinweis: Der Wert der untergeordneten Komponente sollte mit den Feldeigenschaften übereinstimmen, die von der übergeordneten Komponente in der untergeordneten Komponente platziert werden, d. h. in diesem Beispiel toChildren , wie folgt

Wenn die untergeordnete Komponente einen Wert an die übergeordnete Komponente (nach oben) übergeben möchte, kann sie dies durch Aufrufen der von der übergeordneten Komponente übergebenen Rückruffunktion tun.

Fügen Sie in Parent.js die Rückruffunktion callback zu Children.js hinzu und binden Sie die Methode changeMsg

importiere React von „react“;
Kinder aus „./Children“ importieren;
 
Klasse Parent erweitert React.Component {
  Konstruktor(Requisiten) {
	super(Requisiten);
	dieser.Zustand = {
	    msg:'Die übergeordnete Komponente wird an die untergeordnete Komponente übergeben',
        vonKindern:''
	};
    diese.changeMsg = diese.changeMsg.binden(diese)
  }
  Änderungsnachricht(Wert){
    dies.setState({
      vonKindern: val
    })
  }
  machen(){
    zurückkehren (
      <div Stil = {{Hintergrundfarbe:'#f7ba2a',Padding:'20px',Breite:'500px',Rand:'auto',Textausrichtung:'Mitte'}}>
        <p>Beispiel für die Kommunikation zwischen übergeordneten und untergeordneten Komponenten</p>
        <span style={{color:'red'}}>{this.state.fromChildrn}</span>
        <Untergeordnete Elemente toChildren={this.state.msg} callback={this.changeMsg}></Untergeordnete Elemente>
      </div>
    )
  }
}
 
Standard-Übergeordnetes Element exportieren

Verwenden Sie in der untergeordneten Komponente this.props.callback(), um die Rückruffunktion der übergeordneten Komponente auszuführen. Dadurch wird die Bindungsmethode changeMsg ausgeführt und der von der untergeordneten Komponente übergebene Wert angezeigt.

importiere React von „react“;
importiere { Button } von „element-react“;
 
Klasse Children erweitert React.Component {
  Konstruktor(Requisiten) {
	super(Requisiten);
	dieser.Zustand = {
		msg:diese.props.toChildren
	};
    dies.toParent = dies.toParent.bind(dies)
  }
  zum Elternteil(){
    this.props.callback('der von der untergeordneten Komponente übergebene Wert') //Die untergeordnete Komponente löst hierdurch die Rückrufmethode der übergeordneten Komponente aus}
  machen(){
    zurückkehren (
      <div Stil = {{Hintergrundfarbe:'#13ce66',Padding:'10px',Breite:'200px',Rand:'auto',RandTop:'20px'}}>
        <p>Von der übergeordneten Komponente übergeben:</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <Button onClick={this.toParent}>Kind zu Elternteil</Button>
      </div>
    )
  }
}
 
Standard-Untergeordnete Elemente exportieren

Hinweis: Der Name der Rückruffunktion in den Requisiten muss konsistent sein, d. h. in diesem Beispiel lautet der Rückruf wie folgt

Zusammenfassung : Das Obige ist eine Möglichkeit der direkten Kommunikation zwischen übergeordneten und untergeordneten Komponenten, vom übergeordneten zum untergeordneten Element über Eigenschaften und vom untergeordneten zum übergeordneten Element durch Ausführen von Rückrufen.

2. Komponentenkommunikation über verschiedene Ebenen hinweg

Angenommen, es gibt eine untergeordnete Komponente in einer übergeordneten Komponente, und diese untergeordnete Komponente hat eine untergeordnete Komponente, die wir vorerst als „Enkelkomponente“ bezeichnen. Wenn die übergeordnete Komponente mit der „Enkelkomponente“ kommunizieren muss, gibt es zwei gängige Möglichkeiten: schichtweise Wertübertragung und schichtübergreifende Wertübertragung.

1. Werte schichtweise übertragen

Bei dieser Methode wird auf der Grundlage der oben beschriebenen direkten Eltern-Kind-Kommunikation eine Zwischenschicht hinzugefügt. Wenn beispielsweise die übergeordneten und die „Enkel“-Komponenten kommunizieren, können zuerst die übergeordneten und die untergeordneten Komponenten und dann die „Enkel“ kommunizieren, und die Übertragungsebene wird zu übergeordnetem -> untergeordnetem -> „Enkel“. In ähnlicher Weise werden Requisiten nach unten und Rückrufe nach oben weitergegeben. Ich werde nicht ins Detail gehen. Wenn Sie interessiert sind, können Sie es selbst implementieren.

2. Ebenenübergreifender Wertetransfer

Wie der Name schon sagt, kommuniziert das übergeordnete Element mit dem „Enkelkind“, ohne die untergeordnete (mittlere) Komponente zu durchlaufen. Dies bringt uns zum Kontext .

Die offizielle Dokumentation von Act erklärt den Kontext:

In einer typischen React-Anwendung werden Daten über Props Top-down (vom übergeordneten Element zum untergeordneten Element) weitergegeben. Dieser Ansatz ist jedoch für bestimmte Arten von Eigenschaften (z. B. Gebietsschemaeinstellungen, UI-Designs), die von vielen Komponenten in einer Anwendung benötigt werden, äußerst umständlich. Der Kontext bietet eine Möglichkeit, solche Werte zwischen Komponenten zu teilen, ohne dass Props explizit über den Komponentenbaum weitergegeben werden müssen.

Um es in einem Satz zusammenzufassen: ebenenübergreifender Werttransfer und Statusfreigabe .

Schauen wir uns ein einfaches Beispiel an und erklären die Verwendung direkt.

Zuerst erstelle ich eine context.js-Datei (im selben Verzeichnis wie die übergeordneten, untergeordneten und untergeordneten Dateien) mit einem Standardwert eines Objekts.

importiere React von „react“;
const MyContext = React.createContext({text:'luck'});
Standardmäßig MyContext exportieren

Schreiben Sie dann die übergeordnete Komponente neu, führen Sie einen Kontext ein und verwenden Sie einen Provider, um den aktuellen Wert an den folgenden Komponentenbaum zu übergeben, wobei „Wert“ der übergebene Wert ist.

importiere React von „react“;
Kinder aus „./Children“ importieren;
importiere MyContext aus „./context“;
 
Klasse Parent erweitert React.Component {
  Konstruktor(Requisiten) {
	super(Requisiten);
  }
  // Verwenden Sie einen Provider, um den aktuellen Wert an den folgenden Komponentenbaum zu übergeben.
  // Jede Komponente kann diesen Wert lesen, egal wie tief.
  machen(){
    zurückkehren (
      <div Stil = {{Hintergrundfarbe:'#f7ba2a',Padding:'20px',Breite:'500px',Rand:'auto',Textausrichtung:'Mitte'}}>
        <p>Beispiel für Kontextkommunikation</p>
        <MyContext.Provider value={{text:'Viel Glück'}}>
          <Kinder></Kinder>
        </MeinContext.Provider>
      </div>
    )
  }
}
 
Standard-Übergeordnetes Element exportieren

Die untergeordnete Komponente ist eine Zwischenschicht und wird nicht verarbeitet. Sie wird zum Umschließen der „Enkelkomponente“ verwendet.

importiere React von „react“;
importiere Enkel aus „./Grandson“;
 
Klasse Children erweitert React.Component {
  machen(){
    zurückkehren (
      <div>
        <Enkel></Enkel>
      </div>
    )
  }
}
 
Standard-Untergeordnete Elemente exportieren

Fügen Sie eine neue „Enkel“-Komponente hinzu, die ebenfalls Kontext einführen muss. Fügen Sie innerhalb der Komponente static contextType = MyContext hinzu. Zu diesem Zeitpunkt können Sie den vom nächsten Provider in der oberen Ebene übergebenen Wert direkt über this.context abrufen. Zu diesem Zeitpunkt ist this.context = {text:good luck}, d. h. der von der übergeordneten Komponente übergebene Wert.

importiere React von „react“;
importiere MyContext aus „./context“;
 
Klasse Enkel erweitert React.Component {
  statischer Kontexttyp = MeinKontext
  machen(){
    zurückkehren (
      <div Stil = {{Hintergrundfarbe:'#13ce66',Padding:'10px',Breite:'200px',Rand:'auto',RandTop:'20px'}}>
        <p>Durch den Kontext weitergegeben:</p>
        <span style={{color:'blue'}}>{dieser.Kontext.text}</span>
      </div>
    )
  }
}
 
Standard-Enkel exportieren

Holen Sie sich den übergebenen Wert über this.context.text.

Das Obige ist ein Prozess von Eltern-->Enkelkind, also ein Abwärtsprozess. Wenn Sie möchten, dass Enkelkind-->Eltern Werte nach oben übergibt, können Sie Rückruf verwenden

Ändern Sie die übergeordnete Komponente, indem Sie einen Wert übergeben, dem übergebenen Objekt eine Eigenschaft hinzufügen und die übergeordnete Komponentenmethode value={ binden. {text:'Viel Glück', toParent :this.fromGranson}}

importiere React von „react“;
Kinder aus „./Children“ importieren;
importiere MyContext aus „./context“;
 
Klasse Parent erweitert React.Component {
  Konstruktor(Requisiten) {
	super(Requisiten);
    dieser.Zustand = {
      Nachricht:''
    };
    dies.fromGranson = dies.fromGranson.bind(dies)
  }
  vonGranson(val){
    dies.setState({
      msg:Wert
    })
  }
  // Verwenden Sie einen Provider, um das aktuelle Design an den folgenden Komponentenbaum zu übergeben.
  // Jede Komponente kann diesen Wert lesen, egal wie tief.
  machen(){
    zurückkehren (
      <div Stil = {{Hintergrundfarbe:'#f7ba2a',Padding:'20px',Breite:'500px',Rand:'auto',Textausrichtung:'Mitte'}}>
        <p>Beispiel für Kontextkommunikation</p>
        <span style={{color:'red'}}>{this.state.msg}</span>
        <MyContext.Provider value={{text:'viel Glück',toParent:this.fromGranson}}>
          <Kinder></Kinder>
        </MeinContext.Provider>
      </div>
    )
  }
}
 
Standard-Übergeordnetes Element exportieren

Fügen Sie dann eine Schaltfläche in die untergeordnete Komponente ein, binden Sie die Methode und führen Sie den Funktionsrückruf aus

zum Elternteil(){
    this.context.toParent('Enkelkomponente überträgt Daten an Elternkomponente')
 }

importiere React von „react“;
importiere MyContext aus „./context“;
importiere { Button } von 'element-react'
 
Klasse Enkel erweitert React.Component {
  statischer Kontexttyp = MeinKontext
  Konstruktor(Requisiten) {
		super(Requisiten);
    dies.toParent = dies.toParent.bind(dies)
	}
  zum Elternteil(){
    this.context.toParent('Enkelkomponente überträgt Daten an Elternkomponente')
  }
  machen(){
    zurückkehren (
      <div Stil = {{Hintergrundfarbe:'#13ce66',Padding:'10px',Breite:'200px',Rand:'auto',RandTop:'20px'}}>
        <p>Durch den Kontext weitergegeben:</p>
        <span style={{color:'blue'}}>{dieser.context.text}</span>
        <div><Button onClick={this.toParent}>Kontext nach oben</Button></div>
      </div>
    )
  }
}
 
Standard-Enkel exportieren

Die Standardseite ist:

Nach dem Klicken auf die Schaltfläche wird der Rückruf im Kontext ausgeführt, um den Wert hochzuladen.

Unabhängig davon, wie tief die Hierarchie ist, können Sie den Kontext verwenden, um Werte nach unten oder oben weiterzugeben.

Hinweis: Die Felder im Kontext der untergeordneten Komponente müssen mit den im Wert übergebenen Feldern übereinstimmen. Text und toParent

Das Obige ist die allgemeine Verwendung von Context. Weitere Einzelheiten finden Sie in der offiziellen React-Dokumentation:

Kontext – Reagieren

3. Kommunikation mit Brother-Komponenten (nicht verschachtelt)

Wenn zwei Komponenten nicht verschachtelt sind oder sich auf derselben oder auf unterschiedlichen Ebenen befinden, müssen sie miteinander kommunizieren. Es gibt mehrere gängige Methoden:

1. Eine Komponente übergibt den Wert zuerst an dieselbe übergeordnete Komponente und dann über die übergeordnete Komponente an eine andere Komponente. Dabei wird die übergeordnete untergeordnete Komponente zum Übergeben des Werts verwendet.

2. Verwenden Sie den Cache „SessionStorage“, „localStorage“ usw.

3. Wenn zwischen zwei Komponenten ein Sprung stattfindet, können Sie Routing Jump verwenden, um Werte zu übergeben. Eine detaillierte Verwendung ist beigefügt.

React-Lernnotizen – Routing-Parameter für die Komponentenkommunikation (react-router-dom) _ Blog für Front-End-Anfänger von Leo – CSDN-Blog

4. Ereignis (Veröffentlichen-Abonnieren)

Installieren Sie zuerst das Ereignis

npm installiere Event-Save

Erstellen Sie eine neue event.js

importiere { EventEmitter } von 'Ereignisse';
exportiere standardmäßig neuen EventEmitter();

Dann befinden sich die anderen beiden Komponenten auf derselben Ebene (unterschiedliche übergeordnete Komponenten oder unterschiedliche Ebenen sind in Ordnung).

importiere React von „react“;
importiere Enkel aus „./Grandson“;
importiere GrandsonOther von „./GrandsonOther“;
 
Klasse Children erweitert React.Component {
  machen(){
    zurückkehren (
      <div>
        <Enkel></Enkel>
        <Anderer Enkel></Anderer Enkel>
      </div>
    )
  }
}
 
Standard-Untergeordnete Elemente exportieren

Komponente 1 importiert das Ereignis, fügt den Listener „addListener“ (Abonnement) in der Phase „componentDidMount“ hinzu, entfernt den Listener „removeListener“ in der Phase „componentWillUnmount“ und der Ereignisname ist derselbe wie „emitt“ in Komponente 2.

importiere React von „react“;
Ereignis aus „../event“ importieren;
importiere { Button } von 'element-react'
 
Klasse Enkel erweitert React.Component {
  Konstruktor(Requisiten) {
	super(Requisiten);
    dieser.Zustand = {
      Nachricht:''
    }
    dies.zuAnderem = dies.zuAnderem.binden(dies)
  }
  zuAndere(){
    event.emit('eventMsg','durch Event-Netzwerk weitergegebener Wert')
  }
  machen(){
    zurückkehren (
      <div Stil = {{Hintergrundfarbe:'#13ce66',Padding:'10px',Breite:'200px',Rand:'auto',RandTop:'20px'}}>
        <p>Komponente 2</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <div><Button onClick={this.toOther}>Ereigniswertübertragung</Button></div>
      </div>
    )
  }
}
 
Standard-Enkel exportieren

Komponente 2, Importereignis, Schaltflächenbindungsmethode, verwenden Sie event.emit , um das Ereignis auszulösen (zu veröffentlichen).

importiere React von „react“;
Ereignis aus „../event“ importieren;
importiere { Button } von 'element-react'
 
Klasse Enkel erweitert React.Component {
  Konstruktor(Requisiten) {
	super(Requisiten);
    dieser.Zustand = {
      Nachricht:''
    }
    dies.zuAnderem = dies.zuAnderem.binden(dies)
  }
  zuAndere(){
    event.emit('eventMsg','durch Event-Netzwerk weitergegebener Wert')
  }
  machen(){
    zurückkehren (
      <div Stil = {{Hintergrundfarbe:'#13ce66',Padding:'10px',Breite:'200px',Rand:'auto',RandTop:'20px'}}>
        <p>Komponente 2</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <div><Button onClick={this.toOther}>Ereigniswertübertragung</Button></div>
      </div>
    )
  }
}
 
Standard-Enkel exportieren

Klicken Sie auf die Schaltfläche. Komponente 2 veröffentlicht ein Ereignis, Komponente 1 hört das Ereignis ab (abonniert es) und aktualisiert den Inhalt. (Wenn die Identitäten von Herausgeber und Abonnent ausgetauscht werden, ist die Schreibmethode dieselbe)

Hinweis: Wenn zwei Komponenten Ereignisse zur Kommunikation verwenden, stellen Sie sicher, dass die Ereignisnamen für das Veröffentlichen und Abonnieren konsistent sind, wie z. B. „eventMsg“ im obigen Beispiel.

Zusammenfassung: Die Ereignismethode ist relativ flexibel. Unabhängig davon, ob es sich um übergeordnete und untergeordnete, ebenenübergreifende oder gleichstufige oder sogar nicht verwandte Komponenten handelt, kann diese Methode zur Kommunikation verwendet werden.

4. Routing-Wert

React-Lernhinweise – Routing-Parameter für die Komponentenkommunikation (react-router-dom)

5. Wiederholen

Soll freigelassen werden.

Zusammenfassung: In diesem Artikel geht es hauptsächlich um die häufig verwendeten Methoden zur Komponentenkommunikation in React. Bei der täglichen Arbeit wird der Kommunikationsprozess einfacher und klarer, wenn je nach Anwendungsszenario unterschiedliche Kommunikationsmethoden ausgewählt werden.

Wenn Sie die Art und Weise vergleichen, wie Komponenten in Vue kommunizieren, werden Sie viele Ähnlichkeiten feststellen:

Kommunikationsmethoden zwischen Vue-Komponenten (mehrere Szenarien, leicht verständlich, für die Sammlung empfohlen)

Damit ist dieser Artikel über drei Methoden der Kommunikation zwischen React-Komponenten (einfach und benutzerfreundlich) abgeschlossen. Weitere relevante Inhalte zur Kommunikation zwischen React-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!