Detaillierte Erklärung der Komponentenkommunikation in React

importiere React, {Component,createRef} von 'react'
importiere Child1 aus './Child1'
exportiere Standardklasse App erweitert Komponente {
    Konstruktor (Requisiten) {
        super(Requisiten)
        dieses.Kind = createRef()
    }
    machen(){
        zurückkehren(
            <div>
                <Kind1 ref={dieses.Kind}/>
                <button bei Klick={this.fn.bind(this)}></button>
            </div>
        )
    }
    fn(){
        const Kind = dieses.Kind.aktuell
        Kind.setTitle()
    }
}

importiere React, {Component} von 'react'
exportiere Standardklasse Child1 erweitert Komponente{
    Zustand={
        Titel:'Titel'
    }
    machen(){
        zurückkehren (
            <div>
                {dieser.Zustand.Titel}
            </div>
        )
    }
    setzeTitel(){
        dies.setstate({Titel:'hh'})
    }
}

importiere React, {createContext} von „react“
let {Anbieter, Verbraucher} = createContext()
exportieren { 
    Anbieter, //Veröffentlichen Verbraucher //Abonnieren}

importiere React, {Component} von 'react'
importiere {Provider,Consumer} aus './store'
Sohn aus './Son' importieren
exportiere Standardklasse App erweitert Komponente {
    Konstruktor (Requisiten) {
        super(Requisiten)
        dieser.Zustand={
            Name: „mingcen“
        }
    }
    machen(){
        zurückkehren (
            <div>
                <Anbieterwert={this.state.name}>
                    <Sohn/>
                </Anbieter>
            </div>
        )
    }
}

importiere React, {Component} von 'react'
importiere {Consumer} aus './store'
exportiere Standardklasse Son1 erweitert Komponente{
    Konstruktor (Requisiten) {
        super(Requisiten)
        dieser.Zustand={
            Name: "uuu"
        }
    }
    machen(){
        zurückkehren(
            <div>
                <Verbraucher>
                   {
                        Wert=>{
                            <div>{Wert.name}</div>
                        }
                   }
                </Verbraucher>
            </div>
        )
    }
}

Zustand={
    Anzahl: 1,
    setCount:()=>{
        dies.setState(state=>{
            zurückkehren {
                Anzahl:++Zustand.Anzahl
            }
        })
    }
}
machen(){
    let {count,setCount} = dieser.Zustand
    zurückkehren(
        <div>
            <Anbieterwert={{count,setCount}}>
                <Cmp1></Cmp1>
                <Cmp2></Cmp2>
            </Anbieter>
        </div>
    )
}

importiere React, {Komponente, Kontext erstellen} von 'react'
exportiere Standardklasse Cmp2 erweitert Komponente {
  // Habe nur die Standarddaten erhalten --> nicht in die Providerkomponente gepackt static contextType = createContext
  rendern() {
    zurückkehren (
      <div>
        <button onClick={this.setCount.bind(this)}>Daten automatisch inkrementieren</button>
      </div>
    )
  }
  setzeAnzahl() {
    dieser.Kontext.setCount()
  }
}

<Verbraucher>
    {
        Wert => <h3>{value.count}</h3>
    }
</Verbraucher>