Detaillierte Einführung in die Werteübertragung zwischen der übergeordneten Komponente und der untergeordneten Komponente

In diesem Artikel wird hauptsächlich die Methode der Wertübertragung zwischen der übergeordneten Komponente und der untergeordneten Komponente vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

Konzeptionell ist eine Komponente eine geschlossene Umgebung. React verfügt über ein unidirektionales Datenflussdesign, was bedeutet, dass nur übergeordnete Komponenten Daten an untergeordnete Komponenten weitergeben. Bei korrekten technischen Spezifikationen kann die Besitzerkomponente Daten in der eigenen Komponente festlegen.

Wie kommuniziert die untergeordnete Komponente mit der übergeordneten Komponente? Vereinfacht gesagt handelt es sich um einen Umweg. Eine Methode (Funktion) wird in der übergeordneten Komponente eingerichtet und dann an die untergeordnete Komponente übergeben Komponente. Die Requisiten der Komponente. Wenn das Ereignis ausgelöst wird, ruft die Unterkomponente direkt die von diesen Requisiten festgelegte Methode (Funktion) auf. Aber in der Mitte ruft jemand (Objekt) die Funktionseinstellungen auf, was die Rolle davon ist.

Verwenden Sie Requisiten, um die übergeordnete Komponente auf die untergeordnete Komponente festzulegen, und verwenden Sie die oben erwähnte Methode von der untergeordneten Komponente zur übergeordneten Komponente. Dies ist die grundlegende Routine, die jedoch nur für einfache Komponentenstrukturen gilt ziemlich umständlich und unflexibel. Daher ist es nicht allzu einfach, eine Kommunikation zwischen Unterkomponenten und Unterkomponenten zu erreichen. Natürlich denke ich, dass Sie gehört haben, dass komplexe Anwendungen den zusätzlichen Einsatz von Flussmittel oder Redux erfordern, um dieses Problem zu lösen.

Wenn Sie jedoch über das gesamte React-Anwendungsdesign nachdenken, müssen Sie über das Konzept des Anwendungsdomänenstatus verfügen, bei dem es sich um den globalen Status handelt. Der erste ist der Anwendungsdomänenstatus, der sich normalerweise in der übergeordneten Komponente und nicht in der untergeordneten Komponente befindet. Es können viele untergeordnete Komponenten vorhanden sein, die sich tief in der Baumstruktur befinden.

Beispiel:

Untergeordnete Komponente

import React, { Component } from 'react'

export default class Item extends Component {
 constructor(props) {
  super(props)

  this.state = {
   prices: 0
  }
 }

 handleChange(){
  const prices =800;
  this.setState({
   prices: price
  })
  //用传过来的changePrice属性(props)，是个函数，呼叫它把price交给父组件中的函数去处理
  this.props.changePrice(price)
 }

 render() {
  const { prices } = this.state;
    return (
     <p>
       <p onChange={this.handleChange.bind(this)}>
       </p>
       <p>{prices}</p>
     </p>
    )
 }
}

Elternteil Komponenten

import React, { Component } from 'react';
import Item from './Item'

class App extends Component {
 constructor(props) {
  super(props)

  this.state = {price: 0}
 }
 
 //给子组件用来传price用的方法
 changePrice(price){
  this.setState({price: price})
 }

 render() {
  return (
   <p>
    <Item changePrice={this.changePrice.bind(this)}/>
    <p>{this.state.price}</p>
   </p>
  );
 }
}

export default App;

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Werteübertragung zwischen der übergeordneten Komponente und der untergeordneten Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!