Detaillierte Erläuterung der Datenübertragung zwischen React-Elternkomponenten und -Kindkomponenten

Bevor wir die Wissenspunkte der Datenübertragung zwischen React-Framework-Komponenten lernen, müssen wir einige Nutzungsprinzipien klären.

1. Die Kommunikation zwischen React-Komponenten erfolgt einseitig. Die Daten müssen Schicht für Schicht vom übergeordneten Element an das untergeordnete Element oder vom untergeordneten Element an das übergeordnete Element weitergegeben werden.
2. Wenn Sie Daten an Geschwisterkomponenten übergeben möchten, müssen Sie sie zuerst an das gemeinsame übergeordnete Element und dann an den Komponentenspeicherort übergeben, an den Sie sie übergeben möchten.
3. Es wird nicht empfohlen, diese Methode der schichtweisen Datenübertragung zu verwenden, um Daten zwischen Komponenten zu übertragen, die keine Eltern-Kind-Beziehungen haben. Verwenden Sie stattdessen das Funktionsmodul für die globale Statuswartung (Redux).

1. Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente

Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente, indem sie beim Verweisen auf die untergeordnete Komponente in der übergeordneten Komponente die Eigenschaften der übertragenen Daten im Tag der untergeordneten Komponente festlegt. Die untergeordnete Komponente empfängt die übergebenen Daten über this.props. Dadurch wird die Datenübertragung von der übergeordneten Komponente an die untergeordnete Komponente realisiert.

1.1. Übergeordneter Komponentencode

importiere React, {Komponente} von „react“;
importiere './App.css';
Kind aus './child' importieren
Klasse App erweitert Komponente {
    Konstruktor (Requisiten) {
        super(Requisiten);
        dieser.Zustand={
            msg:'Nachricht der übergeordneten Klasse',
            Name:'John',
            Alter:99
        }
    }
    Rückruf=(Nachricht,Name,Alter)=>{
        // setState-Methode, ändere den Wert von msg, der Wert wird vom untergeordneten Element this.setState({msg}) übergeben;
        dies.setState({name});
        this.setState({Alter});
    }
  rendern() {
    zurückkehren (
      <div Klassenname="App">
        <p> Nachricht: {this.state.msg}</p>
        <Untergeordneter Rückruf={dieser.Rückruf} Alter={dieser.Zustand.Alter} 
Name={dieser.Staat.Name}></Kind>
      </div>
    );
  }
}
Standard-App exportieren;

Codebeschreibung: Wenn die übergeordnete Komponente die untergeordnete Komponente (Child) verwendet, übergibt sie zwei Eigenschaften (Alter und Name) und eine Methode (Callback wird derzeit nicht berücksichtigt) an die untergeordnete Komponente.

Schlüsselcode:

<Name des Kindes={Name.dieses.Bundeslandes} Alter={Alter.dieses.Bundeslandes}></Kind>

1.2. Unterkomponentencode

importiere React von „react“;
Klasse Child erweitert React.Component{
    Konstruktor (Requisiten) {
        super(Requisiten);
        dieser.Zustand={
            Name:'Andy',
            Alter: 31,
            msg:"Nachricht von Unterklasse"
        }
    }
    ändern=()=>{
        diese.props.callback(diese.state.msg,dieser.state.name,dieses.state.alter);
    }
    machen(){
        zurückkehren(
            <div>
                <div>{diese.props.name}</div>
                <div>{diese.props.age}</div>
                <button onClick={this.change}>Klick</button>
            </div>
        )
    }
}
Standard-Untergeordnetes Element exportieren;

Codebeschreibung: In der untergeordneten Komponente wird this.props direkt im Render verwendet, um die von der übergeordneten Komponente übermittelten Daten zu übernehmen und direkt zu verwenden. Es wird nicht empfohlen, dass untergeordnete Komponenten this.setSate verwenden, um die empfangenen Daten zu verarbeiten.

Schlüsselcode:

<div>{diese.props.name}</div>
<div>{diese.props.age}</div>

2. Unterkomponenten übertragen Daten an übergeordnete Komponenten

Im React-Framework hängt die Datenübertragung von untergeordneten Komponenten zu übergeordneten Komponenten von der Datenübertragung von übergeordneten Komponenten zu untergeordneten Komponenten ab. Tatsächlich überträgt die übergeordnete Komponente die Funktion ihres eigenen Gültigkeitsbereichs an die untergeordnete Komponente; die untergeordnete Komponente ruft die Funktion auf und übergibt die zu übertragenden Daten in Form von Funktionsparametern an die übergeordnete Komponente.

2.1. Übergeordneter Komponentencode

Im obigen Codebeispiel wird eine Funktion in der übergeordneten Komponente definiert und an die untergeordnete Komponente übertragen.

Klasse App erweitert Komponente {
......
    Rückruf=(Nachricht,Name,Alter)=>{
        // setState-Methode, ändere den Wert von msg, der Wert wird vom untergeordneten Element this.setState({msg}) übergeben;
        dies.setState({name});
        this.setState({Alter});
    }
  rendern() {
    zurückkehren (
      <div Klassenname="App">
        <Untergeordneter Rückruf={this.callback}></Untergeordnet>
      </div>
    );
  }
}
Standard-App exportieren;

Die übergeordnete Komponente übergibt die Funktion ihres eigenen Bereichs an die untergeordnete Komponente. Wenn die untergeordnete Komponente diese Funktion über this.props aufruft, überträgt sie die Daten über Parameter an die Gruppenkomponente.
Hier hat die übergeordnete Komponente drei Parameter: msg, name, age; nachdem die untergeordnete Komponente die Daten übertragen hat, verarbeitet die übergeordnete Komponente sie mit this.setState .

2.2. Unterkomponentencode

Die untergeordnete Komponente empfängt die von der übergeordneten Komponente übertragene Funktion mithilfe von this.props und ruft diese Funktion über die Parametermethode auf, um Daten an die übergeordnete Komponente zu übertragen.

Klasse Child erweitert React.Component{
......
    ändern=()=>{
        diese.props.callback(diese.state.msg,dieser.state.name,dieses.state.alter);
    }
    machen(){
        zurückkehren(
            <div>
                <button onClick={this.change}>Klick</button>
            </div>
        )
    }
}
Standard-Untergeordnetes Element exportieren;

In der untergeordneten Komponente wird eine Methode change() erstellt, die an das Klickereignis onClick gebunden ist. change() ruft die Funktion this.props.callback() auf (die von der übergeordneten Komponente übertragene Funktion). Der eigentliche Parameter der Funktion sind die von der untergeordneten Komponente an die übergeordnete Komponente übertragenen Daten.

Oben finden Sie eine ausführliche Erläuterung der Datenübertragung zwischen übergeordneten und untergeordneten Komponenten von React. Weitere Informationen zur Datenübertragung zwischen übergeordneten und untergeordneten Komponenten von React finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!