Detaillierte Erklärung der React-Komponentenkommunikation

Einführung in die Komponentenkommunikation

Inhalt

• Eine Komponente ist eine unabhängige und abgeschlossene Einheit und kann standardmäßig nur ihre eigenen Daten nutzen.
• Im Komponentenprozess teilen wir eine komplette Funktion in mehrere Komponenten auf, um die Funktionalität der gesamten Anwendung besser zu vervollständigen.
• Bei diesem Vorgang ist es unvermeidlich, dass mehrere Komponenten einige Daten gemeinsam nutzen.
• Um diese Funktionen zu realisieren, ist es notwendig, die Unabhängigkeit und Geschlossenheit der Komponenten aufzubrechen und ihnen die Kommunikation mit der Außenwelt zu ermöglichen. Bei diesem Vorgang handelt es sich um Komponentenkommunikation.

Drei Wege

• Zwischen übergeordneten und untergeordneten Komponenten
• Zwischen Geschwisterkomponenten
• Über Komponentenebenen hinweg

Zusammenfassung

Der Status in einer Komponente ist privat, d. h. der Status einer Komponente kann nur innerhalb der Komponente verwendet werden und kann nicht direkt außerhalb der Komponente verwendet werden.

Komponentenkommunikation - Vater zu Sohn

Inhalt:

• Die übergeordnete Komponente stellt die zu übergebenden Statusdaten bereit.
• Fügen Sie dem Unterkomponenten-Tag Attribute hinzu, wobei der Wert die Daten im Status sind
• Die untergeordnete Komponente empfängt die von der übergeordneten Komponente über Requisiten übergebenen Daten.

Kerncode

Die übergeordnete Komponente stellt Daten bereit und übergibt diese an die untergeordnete Komponente

Klasse Parent erweitert React.Component {
    Status = { Nachname: 'Name' }
    rendern() {
        zurückkehren (
            <div>
                Daten an untergeordnete Komponenten weitergeben: <Child name={this.state.lastName} />
            </div>
        )
    }
}

Unterkomponente empfängt Daten

Funktion Child(Requisiten) {
	return <div>Die untergeordnete Komponente empfängt Daten: {props.name}</div>
}

Komponentenkommunikation - untergeordnetes Element zum übergeordneten Element

Ideen

Bei Verwendung der Rückruffunktion stellt die übergeordnete Komponente den Rückruf bereit, die untergeordnete Komponente ruft ihn auf und die zu übergebenden Daten werden als Parameter der Rückruffunktion verwendet.

Schritt

1. Übergeordnete Komponente

1. Definieren Sie eine Callback-Funktion f (die zum Empfangen von Daten verwendet wird)

2. Übergeben Sie die Funktion f als Wert des Attributs an die untergeordnete Komponente

2. Unterkomponenten

1. Holen Sie sich f durch Requisiten

2. Rufen Sie f auf und übergeben Sie die Daten der untergeordneten Komponente

Kerncode

Die übergeordnete Komponente stellt eine Funktion bereit und übergibt sie an die untergeordnete Komponente

Klasse Parent erweitert React.Component {
    Zustand: {
      Zahl: 100
    }
    f = (Zahl) => {
        console.log('Empfangene Unterkomponentendaten', num)
    }
    rendern() {
        zurückkehren (
            <div>
            	Untergeordnete Komponente: <Child f={this.f} />
            </div>
        )
    }
}

Die untergeordnete Komponente empfängt die Funktion und ruft sie auf

Klasse Child erweitert React.Component {
    handleKlick = () => {
      // Rufe die von der übergeordneten Komponente übergebenen Props auf und übergebe den Parameter this.props.f(100)
    }
    zurückkehren (
    	<button onClick={this.handleClick}>Klicken Sie hier, um Daten an die übergeordnete Komponente zu übergeben</button>
    )
}

Zusammenfassung

Kind zu Elternteil: Rufen Sie die im Elternteil definierte Methode im Kindbestandteil auf und übergeben Sie Parameter nach Bedarf

Komponentenkommunikation - Brother Komponenten

In React gibt es so etwas wie Geschwisterkomponenten nicht, es gibt nur eine Statusförderung.

Ideen

• Übertragen Sie den gemeinsamen Status auf die nächste gemeinsame übergeordnete Komponente, die den Status verwaltet.
• Gedanken: Zustandsverbesserung
• Allgemeine Verantwortlichkeiten der übergeordneten Komponente:
  • Bereitstellen eines gemeinsamen Status
  • Bietet Methoden zur Manipulation des gemeinsamen Status
• Die untergeordneten Komponenten, die kommunizieren möchten, müssen nur den Status oder die Methode zum Bedienen des Status über Requisiten empfangen.

Kerncode

parent.js

importiere React, {Komponente} von 'react'
ReactDOM von „react-dom“ importieren
importiere Jack aus './Jack'
importiere Rose aus './Rose'
Klasse App erweitert Komponente {
  // 1. Der Status wird zum übergeordneten Komponentenstatus = { hochgestuft.
    Nachricht: '',
  }
  rendern() {
    zurückkehren (
      <div>
        <h1>Ich bin eine App-Komponente</h1>
        <Jack sagt={this.changeMsg}></Jack>
        {/* 2. Zeigen Sie der untergeordneten Komponente den Status an*/}
        <Rose msg={this.state.msg}></Rose>
      </div>
    )
  }
  changeMsg = (msg) => {
    dies.setState({
      Nachricht,
    })
  }
}
// Rendering-Komponente ReactDOM.render(<App />, document.getElementById('root'))

Son1.js

importiere React, {Komponente} von 'react'
exportiere Standardklasse Jack erweitert Komponente {
  rendern() {
    zurückkehren (
      <div>
        <h3>Ich bin die Jack-Komponente</h3>
        <button onClick={this.say}>Sagen</button>
      </div>
    )
  }
  sagen = () => {
    this.props.say('du springst, ich schaue')
  }
}

Son2.js

importiere React, {Komponente} von 'react'
exportiere Standardklasse Rose erweitert Komponente {
  rendern() {
    zurückkehren (
      <div>
        <h3>Ich bin die Rose-Komponente - {this.props.msg}</h3>
      </div>
    )
  }
}

Komponentenkommunikation - Komponentenkommunikation über verschiedene Ebenen hinweg

Wenn Sie die komponentenübergreifende Kommunikation in Vue nutzen möchten, müssen Sie Context verwenden.

Schritte zur Verwendung von Context

Es gibt drei Schritte:

1. Importieren und rufen Sie die Methode createContext auf, um die Provider- und Consumer-Komponenten aus dem Ergebnis zu dekonstruieren

importiere { createContext } von 'react'
const { Anbieter, Verbraucher } = Kontext erstellen()

2. Verwenden Sie die Provider-Komponente, um die Stammkomponente zu umschließen und die Daten bereitzustellen, die über das Wertattribut freigegeben werden sollen

zurückkehren (
  <Providerwert={Hier die zu übergebenden Daten einfügen}>
  	<Inhalt der Root-Komponente/>
  </Anbieter>
)

3. Umschließen Sie in jeder abgeleiteten Komponente die gesamte Komponente mit der in Schritt 2 exportierten Consumer-Komponente.

zurückkehren (
	<Verbraucher>
  	{
      （Daten） => {
      	// Die Parameterdaten hier erhalten automatisch die vom Provider übergebenen Daten // console.log(data)
      	return <Komponenteninhalt>
    	}
    }
  </Verbraucher>
)

Landecode

Erstellen Sie die Datei context.js

importiere { createContext } von 'react'
const { Anbieter, Verbraucher } = Kontext erstellen()
export { Verbraucher, Anbieter }

Transformieren der Stammkomponente

importiere { Provider } aus './context'
rendern () {
    zurückkehren (
      <Anbieterwert={{ num: this.state.num }}>
        <div>
          Stammkomponente, Nummer: {this.state.num}
          <Übergeordnetes Element />
          <Onkel />
        </div>
      </Anbieter>
    )
  }

Transformieren Sie die abgeleitete Komponente Uncle.js

React von „react“ importieren
importiere { Consumer } von './context'
exportiere Standardklasse Uncle erweitert React.Component {
  rendern () {
    zurückkehren (
      <Verbraucher>
        {(Daten) => {
          return <div>Ich bin Onkel-Komponente, {data.num}</div>
        }}
      </Verbraucher>
    )
  }
}

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!