Reagiert auf verschiedene Arten, Parameter zu übergeben

Übergeben von Parametern zwischen übergeordneten und untergeordneten Komponenten

Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente, was direkt mit this.props erreicht werden kann.

Fügen Sie in der übergeordneten Komponente der untergeordneten Komponente eine benutzerdefinierte Eigenschaft hinzu, die Daten übergeben muss. In der untergeordneten Komponente können Sie die von der übergeordneten Komponente übergebenen Daten über this.props abrufen.

// Übergeordnete Komponente render() {
        zurückkehren (
                // Verwenden Sie benutzerdefinierte Attribute, um die Methode oder den Parameter zu übergeben, der übergeben werden muss <ShopUi toson={this.state}></ShopUi>
            )
    } 

//Unterkomponente//Sie können die von der übergeordneten Komponente übergebenen Daten über this.props.toson abrufen.

Wenn Sie es an die untergeordnete Komponente weitergeben müssen, geben Sie es einfach über das benutzerdefinierte Attribut in der untergeordneten Komponente weiter.

tograndson={this.props.toson}

Die Enkelkomponente erhält Daten über this.props.tograndson

Wenn eine untergeordnete Komponente einen Wert an eine übergeordnete Komponente übergibt, müssen Sie die Empfangsfunktion und den Status in der übergeordneten Komponente festlegen und den Funktionsnamen über Props an die untergeordnete Komponente übergeben.

Das heißt, die Methode, die übergeordnete Komponente an die untergeordnete Komponente zu übergeben und sie in der untergeordneten Komponente aufzurufen

//Grandson-Komponente exportiert Standardklasse Grandson erweitert Komponente {
    machen(){
        zurückkehren (
            <div Stil={{border: "1px durchgehend rot",margin: "10px"}}>
        {this.props.name}:
                <Auswählen beiÄnderung={this.props.handleSelect}>
                    <option value="Männlich">Männlich</option>
                    <option value="Weiblich">Weiblich</option>
                </Auswählen>
            </div>
        )
    }
};
 
//Untergeordnete Komponente exportiert Standardklasse Child extends Component {
    machen(){
        zurückkehren (
            <div Stil={{border: "1px durchgehend grün",margin: "10px"}}>
                {this.props.name}: <input onChange={this.props.handleVal}/>
                <Enkelname="Geschlecht" handleSelect={this.props.handleSelect}/>
            </div>
        )
    }
};
 
//Übergeordnete Komponente exportiert Standardklasse Parent extends Component {
 
    Konstruktor (Requisiten) {
        super(Requisiten)
        dieser.Zustand={
            Benutzername: '',
            Geschlecht: ''
        }   
    },
    handleVal(Ereignis){
        this.setState({Benutzername: event.target.value});
    },
    handleSelect(Wert) {
        this.setState({Geschlecht: Ereignis.Ziel.Wert});
    },
    machen(){
        zurückkehren (
            <div Stil={{border: "1px solid #000",padding: "10px"}}>
                <div>Benutzername: {this.state.username}</div>
                <div>Benutzergeschlecht: {this.state.sex}</div>
                <Untergeordneter Name="Name" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </div>
        )
    }
}

Vor einiger Zeit hat mir jemand folgende Frage gestellt: Wozu dient super() im Konstruktor?

Um es zusammenzufassen:

Wenn Sie dies im Konstruktor einer Unterklasse verwenden möchten, müssen Sie den Konstruktor der übergeordneten Klasse aufrufen, sonst erhalten Sie dies nicht.

Die Frage ist also, wie der Konstruktor der übergeordneten Klasse aufgerufen wird. Über super()

Wenn Sie die von der übergeordneten Komponente übergebenen Parameter im Konstruktor verwenden möchten, müssen Sie die Parameter beim Aufrufen des Superkonstruktors der übergeordneten Komponente an den Konstruktor der übergeordneten Komponente übergeben.

Wenn Sie dies oder Parameter im Konstruktor nicht verwenden, brauchen Sie super nicht; React bindet dies und die Props bereits für Sie.

Routing-Parameter

Installnpm install react-router-dom --save-dev

Routen definieren (normalerweise im Freien)

 <HashRouter> 
    <Schalter> 
        <Routengenauer Pfad="/" component={Home}/> 
        <Genauer Routenpfad="/detail" component={Detail}/> 
    </Schalter> 
</HashRouter> 

Wenn die Seite springt

<li onClick={el => this.props.history.push({
   Pfadname: „/detail“,
     Status: {id:3}
})}
>
</li>

Empfangen Sie die übergebenen Daten über this.props.history.location

Möglicherweise liegt ein Problem bei der Übergabe der Routenparameter vor, d. h. nur die Komponente, die bei der Definition der Route montiert wird, weist in den Requisiten eine Übereinstimmung mit dem Standortverlauf auf.

Die auf der Route montierte Komponente ist normalerweise Container.js. Im Allgemeinen trennen wir die UI.js-Komponente und klicken und springen hinein. In den Eigenschaften der UI-Komponente gibt es keine Übereinstimmung mit dem Standortverlauf.

Sie müssen die High-Level-Komponente mit Router verwenden

Statusverbesserung

Fördern Sie den Status, den mehrere Komponenten gemeinsam nutzen müssen, an die ihnen am nächsten gelegene gemeinsame übergeordnete Komponente, und verteilen Sie ihn dann über Requisiten an die untergeordneten Komponenten.

Kontext

Wenn eine Komponente einen Status in ihrem eigenen Kontext speichert, können alle untergeordneten Komponenten dieser Komponente auf diesen Status zugreifen, ohne dass Zwischenkomponenten ihn weitergeben müssen. Die übergeordnete Komponente dieser Komponente kann jedoch nicht darauf zugreifen.

Klasse Index erweitert Komponente {
  statische untergeordnete Kontexttypen = {
    Themenfarbe: PropTypes.string
  }

  Konstruktor () {
    super()
    dieser.Zustand = { Themenfarbe: 'rot' }
  }

  getChildContext () {
    return { Themenfarbe: dieser.Zustand.Themenfarbe }
  }

  rendern () {
    zurückkehren (
      <div>
        <Kopfzeile />
        <Haupt />
      </div>
    )
  }
}

Komponenten, die Kontext bereitstellen, indem sie Eigenschaften über getChildContext() an alle untergeordneten Komponenten übergeben, müssen childContextTypes als Deklaration und Validierung des Kontexts bereitstellen.

Klasse Titel erweitert Komponente {
  statische Kontexttypen = {
    Themenfarbe: PropTypes.string
  }

  rendern () {
    zurückkehren (
      <h1 style={{ color: this.context.themeColor }}>Titel</h1>
    )
  }
}

Wenn eine Unterkomponente den Inhalt im Kontext abrufen möchte, muss sie contextTypes schreiben, um den Typ des Status zu deklarieren und zu überprüfen, den Sie abrufen müssen. Dies ist ebenfalls erforderlich. Wenn Sie es nicht schreiben, können Sie den Status im Kontext nicht abrufen.
Der Titel möchte die Themenfarbe abrufen, die ein String ist. Deshalb deklarieren wir sie in Kontexttypen.

Einführung in Redux

Redux bietet einen vorhersehbaren Zustandsverwaltungsmechanismus für React

Redux speichert den gesamten Anwendungsstatus im Store, der einen Statusbaum speichert

Komponenten können Aktionen an den Store senden, anstatt andere Komponenten direkt zu benachrichtigen.

Andere Komponenten können ihre Ansichten aktualisieren, indem sie den Status im Store abonnieren.

Dies ist das Ende dieses Artikels über verschiedene Möglichkeiten zum Übergeben von Parametern in React. Weitere relevante Inhalte zum Übergeben von Parametern in React 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!